javascript - jQuery 从选择框中显示两个按钮

标签 javascript jquery html select html-select

我有这段代码,它工作正常但不完美。当我选择选项“二”和“三”时,我不知道如何显示这两个按钮。

我的代码也似乎太难了,是否有机会有效地编写我的代码?非常感谢。

function display() {
  var selectBoxValues = $("#selectbox").val() || [];

  if (selectBoxValues == '2') {
    $('.select2').removeAttr('hidden', 'hidden');
  }
  if (selectBoxValues != '2') {
    $(".select2").attr('hidden', 'hidden');
  }
  if (selectBoxValues == '3') {
    $('.select3').removeAttr('hidden', 'hidden');
  }
  if (selectBoxValues != '3') {
    $(".select3").attr('hidden', 'hidden');
  }
}

$("#selectbox").change(display);
display();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectbox" multiple="multiple">
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
</select>

<input hidden="hidden" type="button" class="button select2" value='Button 2' id="button">

<input hidden="hidden" type="button" class="button select3" value='Button 3' id="button">

jsfiddle

最佳答案

多选时应该使用数组,代码如下

 function display() {
   var selectBoxValues = $( "#selectbox" ).val() || [];
   $(".button").attr('hidden','hidden'); //add hidden to all element
   selectBoxValues.forEach(function(e){
     $('.select'+e).removeAttr('hidden','hidden'); //remove hidden for selected elements
   })

 }

http://jsfiddle.net/hoa849p8/1/

关于javascript - jQuery 从选择框中显示两个按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42021570/

相关文章:

javascript - Html + js +css 打包器

javascript - 检索级联元素中的文本

jquery - 第一次点击、第二次点击和第三次点击事件

javascript - D3 散点图中点的缩放位置发生变化

折叠式菜单的 JavaScript 代码

jquery - 将 jQuery getJSON 中的数据分配给数组

html - 背景图像随着其中的文本而增长

java - 输出为 HTML 而不是纯文本

javascript - 如何启用在数据表中搜索隐藏列?

javascript - 如何使用 WWW::Mechanize 抓取具有动态表单的网站?