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

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 将消失，第二个 div 将出现。

Answer 1

使用split() 获取号码

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