jQuery show/hide div 带有 select 个选项（按名称）

Question

我的 div 有问题 showing/hiding，这取决于所选值 "name"。

这是我的 HTML :

    <select name="selectVehicle" id="selectVehicle">
    <option name="A" value="A">Car</option>
    <option name="C" value="C">Truck</option>
    </select>
    <div id="A" class="vehicle">+Car+</div>
    <div id="C" class="vehicle" style="display:none;">+Truck+</div>

...还有我的 JS：

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

https://jsfiddle.net/wgee7ekh/1/

Answer 1

以下是 select 基于 name 属性的方法：

$(function() {
    $('#selectVehicle').change(function(){
        $('.vehicle').hide();
        $('#' + $(this).find('option:selected').attr('name')).show();
    });
});

这是一个JSFiddle

Answer 2

您可以使用 :selected 获取所选选项的 name 属性。

$('#selectVehicle').change(function(){
    $('.vehicle').hide();
    $('#' + $(':selected',this).attr('name')).show();
});

Updated Fiddle

Answer 3

问题是 .change() 事件处理程序中的 this 是 <select> 元素，而不是选定的 <option> 元素，但您想要 name 属性来自所选 <option> 元素。

您可以通过多种方式获取所选选项。在普通 Javascript 中，您可以像 this.options[this.selectedIndex] 中那样使用 .options 数组和 .selectedIndex 属性来获得它：

$(function() {
    $('#selectVehicle').change(function(){
        $('.vehicle').hide();
        $('#' + this.options[this.selectedIndex].getAttribute("name")).show();
    });
});

jsFiddle: https://jsfiddle.net/jfriend00/upswtfeg/

或者在jQuery中，可以使用伪选择器:selected这样查找：

$(function() {
    $('#selectVehicle').change(function(){
        $('.vehicle').hide();
        $('#' + $(this).find('option:selected').attr('name')).show();
    });
});

jsFiddle: https://jsfiddle.net/jfriend00/ywkd25w8/

jQuery show/hide div 带有 select 个选项（按名称）

jQuery show/hide div with select options by name

javascript

jquery

select

show-hide