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

的問題是，在this您.change()事件處理程序是<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/