jQuery 显示/隐藏 div，按名称选择选项

Question

我在显示/隐藏我的 div 时遇到问题，这取决于选定的值“名称”。

这是我的 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

以下是您根据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> 元素，但您需要选定<option> 元素的name 属性。

您可以通过多种方式获得选定的选项。在纯 Javascript 中，您可以使用 .options 数组和 .selectedIndex 属性，就像在 this.options[this.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/