Question

我在显示/隐藏我的div时遇到问题，这取决于所选的值＆＃34; name＆＃34;。

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

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

您可以通过几种方式获取所选选项。在普通的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/

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

3 个答案: