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

What is a better way to use less code to hide and display select menu content? javascript

本文关键字：更好 方法 javascript 是什么 菜单 选择 代码 隐藏 显示      更新时间：2023-09-26

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

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

例如：

下拉选择菜单

<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) {
    $(".content>div").hide(); //for arbitrary keywords.
    $('div#' + i).css("display", "inline-block");
}

将功能更改为：

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

阅读有关属性选择器的更多信息

使用以下代码。检查工作的DEMO

JQUERY

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

HTML

<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>

使用jquery，您可以编写：

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

jsFiddle（已更新）

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

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

HTML:

<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>

JS（使用jQuery）:

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