проблема с раскрывающимся списком с jquery

Question

iam, работающий над выпадающим списком html, если я выбираю «нет в списке», тогда он должен открыть новое текстовое поле. У меня есть два выбора выпадающих списков, он работает для одного раскрывающегося списка, и он не выглядит для другого. пожалуйста помоги . Вот моя скрипка

http://jsfiddle.net/Raghu123/yhovt8pm/

$(document).ready(function(){ 
    $("#materialName").change(function(){ 
     $("select option:selected").each(function(){ 
      if($(this).attr("value")=="Not in list"){ 
        $(".newMaterialName").show(); 
        $("#newMaterialName").focus(); 

      } 
      else { 
       $(".newMaterialName").hide(); 
      } 
     }); 
    }).change(); 

$("#Vendor").change(function(){ 
     $("select option:selected").each(function(){ 
      if($(this).attr("value")=="Not in listt"){ 
       $(".newVendor").show(); 
       $("#newVendor").focus(); 

      } 
      else { 
       $(".newVendor").hide(); 
      } 
     }); 
    }).change(); 
}); 

здесь HTML

<select class="select-style" id="Vendor" class="form-control" name="Vendor"> 
    <option value="">---------------------------Select Vendor----------------------------</option> 
    <option value="a">a</option> 
    <option value="b">b</option> 
    <option value="Not in listt">Not in list, enter new vendor</option> 
</select> 
<div class="newVendor"> 
    <p class="contact"><label for="name">Enter new Vendor name</label></p> 
    <input id="newVendor" name="newVendor" type="text" class="form-control"> 
</div> 

<p class="contact"><label for="name">Material Name</label></p> 

<select class="select-style" id="materialName" class="form-control" name="materialName"> 
    <option value="">---------------------------Select Material Name----------------------------</option> 
    <option value="a">a</option> 
    <option value="b">b</option> 
    <option value="Not in list">Not in list, enter new Material Name</option> 
</select> 
<div class="newMaterialName"> 
    <p class="contact"><label for="name">Enter new Material Name</label></p> 
    <input id="newMaterialName" name="newMaterialName" type="text" class="form-control"> 
</div> 

Answer 1

Два селекторы не в состоянии идентифицировать соответствующие элементы были причиной этого не работал раньше.

Fiddle

я удалил цикл и принесенных с использованием значений if($(this).val()

Просто для справки, $("select#materialName option:selected") также будет работать, как он идентифицирует элемент однозначно. И чтобы избежать цикла, мы можем напрямую получить значение элемента с помощью $(this).val().

Answer 2

Из-за 2 select box, $("select option:selected") не работает. он ожидает что-то уникальное, чтобы заставить его работать. Пожалуйста, попробуйте изменить, выбрав текущее выбранное значение, как: $(this).val()

Answer 3

Если ваш рабочий с:

$("select option:selected").each(function(){ 

вы выбираете любой блок выбора, вы не сосредоточены на одном. Поэтому, если во втором поле «нет в списке», и вы изменили первый квадрат, вы получите свой ящик ввода под первым полем, потому что второй выбор является истинным.

Вам не нужно перебирать каждое значение. вам нужно только проверить с помощью

if($(this).val()=="Not in list"){ 

Если значение selectbox равно «Not in list». Вы можете сделать одну функцию, вам не нужно два, по одному для каждого окна выбора.

Answer 4

Причина позади одного ниспадающего работы, а другой не потому, что дом смущает то же заявление используется дважды, который: $("select option:selected").each(function(){

Вы использовали $("select option:selected").each(function(){ для обоих #materialName and #Vendor. DOM обнаруживает изменения для первого SELECT, который он находит в DOM на обоих событиях изменения. Вот почему работает только одно выпадающее меню, а другое - нет.

вы должны изменить ваши две линии, чтобы

$("#materialName").change(function(){ 
    $("#materialName option:selected").each(function(){ 

и

$("#Vendor").change(function(){ 
     $("#Vendor option:selected").each(function(){ 

FIDDLE