jQuery показать/скрыть div с опциями выбора по имени

Question

У меня возникла проблема с отображением/скрытием моих div, которые зависят от выбранного значения «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

Вот как вы выберете на основе 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/