Question

我想知道如何根据所选选项显示隐藏的div，并且已经显示了预选选项的div。

<select name="fruits" id="fruits">
 <option value="apple" data-fruit-name="apple" selected="selected">Apple</option>
 <option value="mango" data-fruit-name="mango">Mango</option>
</select>

<div class="message" data-fruit-name="apple">I'm Apple.</div>
<div class="message" data-fruit-name="mango">I'm Mango.</div>

如果未选择该消息，则应隐藏该消息。但是，由于预选了Apple，我希望它的信息也可以预先显示出来。当用户选择Mango时，应该隐藏Apple的消息，应该显示Mango的消息，反之亦然。

Answer 1

你可以这样做：

$('#fruits').change(function() {
    var fruitName = $(this).find('option:selected').data('fruit-name');
    $('.message[data-fruit-name="' + fruitName + '"]').show().siblings('.message').hide();
}).change();

<强> Fiddle Demo

Answer 2

试试这段代码。

$('#fruits').change(function (){
  $('.message').hide();
  var fruit = $(this).find('option:selected').data('fruit-name');
  $('.message[data-fruit-name="' + fruit + '"]').show();
});

但最好重构要识别的消息元素，例如：

<div class="message" id="apple">I'm Apple.</div>
<div class="message" id="mango">I'm Mango.</div>

然后将代码更改为：

$('#fruits').change(function (){
  $('.message').hide();
  var fruit = $(this).find('option:selected').data('fruit-name');
  $('#' + fruit).show();
});

Answer 3

您可以使用val（）选择正确的div并显示它并使用.siblings隐藏其他div：

JS：

$(function(){

    //Hide initially
    $("#"+$("select").val()).siblings("div").hide();

    $("select").change(function(){

        //Hide/show onChange
        $("#"+$("select").val()).show().siblings("div").hide();

    });

});

HTML：

<select>
    <option value="a" selected>a</option>
    <option value="b">b</option>
    <option value="c">c</option>
</select>

<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>

JSFiddle

Answer 4

$(function(){
    $('#fruits').change(function(){
        var display = $(this).val();
        $('.message[data-fruit-name='+display+']').show().siblings('.message').hide();
    });
});

<select name="fruits" id="fruits">
 <option value="apple" data-fruit-name="apple" selected="selected">Apple</option>
 <option value="mango" data-fruit-name="mango">Mango</option>
</select>

<div class="message" data-fruit-name="apple" style='display:none;'>I'm Apple.</div>
<div class="message" data-fruit-name="mango" style='display:none;'>I'm Mango.</div>

Answer 5

 $(".message").hide();

$("#fruits").change(function() { 
     var _this = $(this);
    $(".message").each(function() { 
        if(_this.find("option:selected").data("fruit-name") == $(this).data("fruit-name")) {
         $(".message").hide();
         $(this).show();   
        }
    }); 

}).change();

Fiddle

选项选择显示/隐藏div，显示预选的div

5 个答案:

JS：

HTML：

JSFiddle