Question

这是我的代码：

HTML ：

<Select id="colorselector">
   <option value="red-1">Red</option>
   <option value="yellow-2">Yellow</option>
   <option value="blue-2">Blue</option>
   <option value="black-1">Black</option>
</Select>
<div id="-1" class="colors" style="display:none"> Div1... </div>
<div id="-2" class="colors" style="display:none"> Div2.. </div>

JS ：

$(function() {
    $('#colorselector').change(function(){
        $('.colors').hide();
        $('#' + $(this).val()).show();
    });
});

我想要的是：当我选择包含"-1"的选项时，将出现第一个div，第二个div将消失。如果我选择包含"-2"的选项，则第一个div将消失，第二个将显示。

Answer 1

使用 split() 获取数字

＆＃13;

$(function() {
  $('#colorselector').change(function() {
    $('.colors').hide();
    $('#-' + $(this).val().split('-')[1]).show();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<Select id="colorselector">
  <option value="red-1">Red</option>
  <option value="yellow-2">Yellow</option>
  <option value="blue-2">Blue</option>
  <option value="black-1">Black</option>
</Select>
<div id="-1" class="colors" style="display:none">Div1...</div>
<div id="-2" class="colors" style="display:none">Div2..</div>

＆＃13;

Answer 2

试试这个：

<强> JS：

$("#colorselector").change(function(){
    if((this.options[this.selectedIndex].value).indexOf("-1") > -1) {
        $("#-2").hide();
        $("#-1").show();
    }
    else {
        $("#-1").hide();
        $("#-2").show();
    }
});

Demo.

根据选择选项显示/隐藏div

2 个答案: