JQuery показать / скрыть div при изменении выбора не работает с параметрами, заполненными JSON

Question

JQuery показать / скрыть div при изменении выбора не работает с параметрами, заполненными JSON

0

У меня есть некоторые параметры, которые я добавляю в веб-форму и немного очищаю HTML. Я использую некоторые скрипты для заполнения параметров для некоторых из полей выбора. Мне нужно показать/скрыть некоторые divs на основе того, что выбрано, и оно работает правильно для одного из вариантов, которые имеют жестко настроенные параметры HTML. Тем не менее, для другого раскрывающегося списка, которое я заполняю через скрипт, а некоторые JSON не отображает или не скрывает изменения div. Кто-нибудь видит, что я делаю неправильно?

JS Fiddle

если вы выберете участника +1, тогда один div отобразит как следует. Но другой никогда не показывает другого div!

Вот HTML:

<div id="tickets">
  <label for="group1">Number of Tickets: <span class="req">*</span></label>
  <select class="group1_dropdown" id="group1" name="group1">
   <option value="0">-- Please select --</option>
   <option value="1">Member</option>
   <option value="2">Member + 1 Guest</option>
   <option value="3">Member + 2 Guests</option>
   <option value="4">Member + 3 Guests</option>
  </select>
 <label class="visuallyhidden">Year</label>
 <select id="yearSelectionBox2" class="stringInfoSpacing">
  <option value="0" selected="selected">Year</option>
 </select>
</div>
<div id="payMethod">
  <div class="header"> PAYMENT METHOD </div>
   <div id="payOptions">
    <div id="payInfo">
    <div id="pay0" class="paymentinfo">
    <p>PAYMENT INFO OPTION 1</p>
  </div>
    </div>
  </div>
 </div>
<div id="pay222" class="tacos">
  <p>Years Data</p>
 </div>

Вот сценарии, которые я использую:

 var YearListItems2= "";
for (var i = 0; i < modelYearJsonList2.modelYearTable2.length; i++){
YearListItems2+= "<option value='" + modelYearJsonList2.modelYearTable2[i].modelYearID + "'>" + modelYearJsonList2.modelYearTable2[i].modelYear + "</option>";
  };
    $("#yearSelectionBox2").html(YearListItems2); 
     //The div is not showing/hiding as it should 
     $("#yearSelectionBox2").change(function () {
      var str = "";
      str = parseInt($("select option:selected").val());       
     if(str == 2013)
     $("#pay222").show('slow');
      else
         $("#pay222").hide('fast');
 });
 //This one works as it should
  $("#group1").change(function () {
   var str = "";
  str = parseInt($("select option:selected").val());       
   if(str == 2)
     $("#payMethod").show('slow');
     else
      $("#payMethod").hide('fast');
 });

isaac weathers 17 фев. 2014, в 05:06

Источник

Теги:

javascript

jquery

html

json

css

3 ответа

1

Неверный выбор селектора элементов. Либо вы должны использовать $(this) либо select element id (becuase id будет уникальным).

$("#yearSelectionBox2").change(function () {
    var str = "";
    str = parseInt($(this).val());        
     if(str == 2013)
         $("#pay222").show('slow');
      else
          $("#pay222").hide('fast');
});

DEMO

или

$("#yearSelectionBox2").change(function () {
    var str = "";
    str = parseInt($("select#yearSelectionBox2 option:selected").val());        
     if(str == 2013)
         $("#pay222").show('slow');
      else
          $("#pay222").hide('fast');
});

DEMO

Unknown 17 фев. 2014, в 01:09

0

Ваши демоверсии работают. Спасибо тебе за это.
isaac weathers 17 фев. 2014, в 06:14

0

В вашем коде просто измените

Эта строка:

str = parseInt($("select option:selected").val());

Для того, чтобы:

str = parseInt($("select#yearSelectionBox2 option:selected").val());

Jayendra Gothi 17 фев. 2014, в 02:36

Ещё вопросы

Ваши демоверсии работают. Спасибо тебе за это.

Arun P Johny · Accepted Answer · 2014-02-17T02-14-00.000Z

В обработчиках событий изменения выбран ваш селектор элементов выбора, this относится к элементу выбора, который был изменен, который используется для ссылки на элемент вместо использования другого селектора

$("#yearSelectionBox2").change(function () {
    var str = parseInt($(this).val());
    if (str == 2013) {
        $("#pay222").show('slow');
    } else {
        $("#pay222").hide('fast');
    }
});

Вы использовали $("select option:selected") чтобы получить выбранное значение, которое всегда будет возвращать значение первого элемента select вместо текущего, вместо этого используйте $(this).value().

Примечание. То же самое происходит и с обработчиком group1, теперь он работает, потому что это первый выбор на данной странице сейчас, когда новый выбор добавляется до того, как это произойдет.