使用较少的代码隐藏和显示“选择”菜单内容的更好方法是什么？javascript

更新选项值不是增量的，这有关系吗？一种选择是苹果，另一种选择是狗

我有多个带有多个选项的下拉菜单，每次选择一个选项时，我都会显示不同的信息，但为了隐藏它以显示不同选项的信息，我必须比较当前选项的值，如果它匹配，则隐藏它，然后显示新选项的信息

例如：

下拉选择菜单

<select name="name_of_select_menu" onchange="showContent(value);">
<option value="">label option</option>
<option value="apple">apple</option>
<option value="dog">dog</option>
<option value="shoes">shoes</option>
</select>

javascript

<script type="text/javascript">
function showContent($i) {
if($i=="apple"){
document.getElementById('apple').style.display = "inline-block";
document.getElementById('dog').style.display = "none";
document.getElementById('shoes').style.display = "none";
}
if($i=="apple"){
document.getElementById('apple').style.display = "none";
document.getElementById('dog').style.display = "inline-block";
document.getElementById('shoes').style.display = "none";
}
if($i=="apple"){
document.getElementById('apple').style.display = "none";
document.getElementById('dog').style.display = "none";
document.getElementById('shoes').style.display = "inline-block";
}

}

要显示的内容

<div class="content">
<div id="apple">
<p>
I am an apple
</p>
</div>
<div id="dog">
<p>
I am a dog
</p>
</div>
<div id="shoes">
<p>
I am a pair of shoes
</p>
</div>
</div>

正如你所看到的，这可能会变得很多。。。我有20个菜单选项。。。检查19个东西是否打开和关闭，然后打开您想要看到的实际东西

更新：

将功能更改为：

function showContent(i) {
    $("[id*=option]").hide();
    $('#' + i).css("display", "inline-block");
}

---

使用下面的代码。检查工作

JQUERY

 $(document).ready(function(){
    $('.content div').hide();
    $(document).on('change','select[name="name_of_select_menu"]',function(){
       $('.content div').hide();
       $('#'+$(this).val()).show(); 
    }); 
 });

HTML

---

使用jquery，您可以编写：

function showContent(i)
  document.getElementById(i).style.display = "inline-block";
  $("select[name=name_of_select_menu]").find("option").not("option[id=="+i+"]").hide();
}

你可以用几种不同的方法来简化它。将更改处理程序移出HTML，并直接从JS绑定到DOM元素。然后动态捕获表单元素的值，并使用该值确定要显示的元素

由于要切换元素的可见性，因此需要一种同时隐藏所有元素的方法。可以使用$'.content>div.hide隐藏所有元素，然后使用$'yourId.show显示特定元素

HTML:

---

您应该在变量前面加上$if，并且仅当它是jQuery对象时。这里是一个字符串。@D4V1D这不是jquery代码。我只看到它的javascript代码。但我的建议仍然有效。您标记了jQuery，所以请允许我指出这一点。@janicehoplin您试图隐藏/显示的元素是否有一个通用的类名？或共享父元素？@janicehoplin[id^=option]。此代码隐藏所有以选项开头的ID。无需在此处添加任何增量值选项不递增，它们是不同的字，这有关系吗？如果ID属性包含选项字，则无关系，代码将正常工作。基本上，$[id*=option]会选择id中包含选项字符串的所有元素。我尝试了这个方法，但并没有隐藏它们，也许我做了一些错误的事情，为了让它起作用，元素id中的任何位置都应该有选项字符串。如果选项丢失或被替换，则该选项将不起作用。因此，请确保您要针对的元素必须在其id中包含选项字符串。OP的代码没有试图隐藏元素，甚至通过css也不可能隐藏元素，好吧……我看到您的演示正常，但我更新了我的问题，我没有使用增量选项，它们是任意字符串，我似乎无法让它正常工作。。。谢谢你这么多的努力far@janicehoplin您可以添加您的html代码，如果ID有不同的名称，而不是选项前缀，那么代码将无法工作。为所有ID提供一些HTML代码或使用公共类名..我不知道为什么这、K和nbrooks的答案不起作用。。。我拥有的两个div被自动显示，尽管它被初始化为display:none@janicehoplin加载页面时是否要隐藏所有div？然后根据要显示div的选择？对吗？@janicehoplin很乐意帮助你。问题的第一件事是您正在使用核心javascript。使用jquery，代码变得非常小。。您的更改事件没有问题，它可以正常工作。我只是向您展示jquery如何使用onchange事件

<select name="name_of_select_menu">
 <option value="">label option</option>
 <option value="apple">apple</option>
 <option value="dog">dog</option>
 <option value="shoes">shoes</option>
</select>

   <div class="content">
    <div id="apple">
     <p>
       I am an apple
      </p>
     </div>
     <div id="dog">
       <p>
       I am a dog
       </p>
    </div>
    <div id="shoes">
     <p>
      I am a pair of shoes
     </p>
   </div>
  </div>

function showContent(i)
  document.getElementById(i).style.display = "inline-block";
  $("select[name=name_of_select_menu]").find("option").not("option[id=="+i+"]").hide();
}

<select name="name_of_menu">
  <option value="">label option</option>
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
</select>

$(function () {
    $('[name="name_of_menu"]').change(function () {
        $('.content > div').hide();
        $('#' + $(this).val()).css("display", "inline-block");
    });
});