Question

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

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

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

Answer 1

您应该在多个选择中使用该数组，并按如下方式编写代码

 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/

Answer 2

试试这个

function display() {
  var selectBoxValues = $( "#selectbox" ).val() || [];
  if (selectBoxValues.indexOf('2')>-1) {
    $('.select2').removeAttr('hidden','hidden');
  }
  if (selectBoxValues.indexOf('2') == -1) {
    $(".select2").attr('hidden','hidden');
  }
  if (selectBoxValues.indexOf('3')>-1) {
    $('.select3').removeAttr('hidden','hidden');
  }
  if (selectBoxValues.indexOf('3')==-1) {
    $(".select3").attr('hidden','hidden');
  }
}

Working Fiddle

Answer 3

您遇到的问题是，从select select返回的val()是一个数组，因此通过将数组与字符串进行比较，您会在选择多个选项时遇到问题。

要解决此问题，您可以使用indexOf()方法查找数组中的特定值，并使用toggle()显示相关按钮。另请注意，我从未在hidden元素上看到input用作属性，坦率地说，我对它的工作更加惊讶。我建议您使用CSS来隐藏/显示元素。最后，您应该使id属性也是唯一的，因为在按钮之间共享它们是无效的。试试这个：

function display() {
  var selectBoxValues = $("#selectbox").val() || [];  
  $('.select2').toggle(selectBoxValues.indexOf('2') != -1);
  $('.select3').toggle(selectBoxValues.indexOf('3') != -1);
}

$("#selectbox").change(display).change();

.button { display: none; }

<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 type="button" class="button select2" value="Button 2" id="button1">
<input type="button" class="button select3" value="Button 3" id="button2">

Answer 4

代码的问题是selectBoxValues包含所选元素的数组，我们只将它与第一个元素进行比较。因此，我们必须首先禁用所有按钮，然后在必要时删除隐藏。

这是小提琴。 http://jsfiddle.net/hoa849p8/4/

JS代码如下：

function display() {
  var selectBoxValues = $( "#selectbox" ).val() || [];
  console.log(selectBoxValues);
  $('.button').attr('hidden','hidden');
  $(selectBoxValues).each(function(i,item){
    $('.select'+item).removeAttr('hidden');
  });
}

$( "#selectbox" ).change( display );
display();

Answer 5

您可以使用以下内容作为一点重构

http://jsfiddle.net/hoa849p8/2/

HTML

保持为你的

<强> SCRIPT

function display() {
    var selectBoxValues = $( "#selectbox" ).val() || [];
    var buttons = $(".button");
    buttons.attr("hidden", "hidden");

    if (selectBoxValues == '2') {
        $('.select2').removeAttr('hidden','hidden');
    }

    if (selectBoxValues == '3') {
        $('.select3').removeAttr('hidden','hidden');
    }
}
$( "#selectbox" ).change( display );

jQuery在selectbox中显示两个按钮

5 个答案: