基于选择选项的显示/隐藏div

Question

这是我的密码：

：

<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

使用斯普利特(获取号码

​

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

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

​

Answer 2

试试这个：

JS:

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

演示。