Нажмите Событие и значение опции

Question

Здесь у меня есть два вопроса, один из которых включен в onload. Все списки должны быть скрыты. Зависит от списка переключателей, который должен был отображаться/скрыть список, но он не работает здесь, а другой - мне нужно проверить, есть ли опция списка значение содержит нулевое значение или пустое пространство, если мне нужно его удалить. это тоже не работает, ошибки в коде могут помочь кому-то.

<script> 
    if ($('input[name=B]:checked').val() == "city") { 

     $("#country,#zone,#state,#Areamanager,#outlet").val(''); 

     $("#country_value,#zone_value,#state_value,#Areamanager_value,#outlet_value").val(''); 
     $("#city").show(); 

     $("#country,#zone,#state,#Areamanager,#outlet").hide(); 


    } 

    $.each(main, function (i, val) { 
     if (val == "Null Value" || val == "") { 
      val = null; 
     } 
    }); 
</script> 

Refer the link

Answer 1

Если бы взглянуть на fiddle provided

Fiddlehttp://jsfiddle.net/Varinder/tHXN3/1/

Это считается bad practice встраивать вызовы событий JS.

Обычно это хороший признак для рефакторинга, если вы заметили, что логика повторяется более трех раз.

Поправьте меня, если им неправильно, вы требование:

• показать кучу или зависимые полей на основе радио-кнопке, выбранной
• сбросить все поля, которые не связаны с активной в данный момент радио-кнопки
• на странице load strip отключить все опции выбора, которые имеют либо «Null value», либо просто пустую строку.

Немного рефакторинга на HTML стороне вещей может пройти долгий путь, при прохождении его через JQuery:

Heres структура я считаю, будет отвечать вашим требованиям (подробнее об этом далее вниз). И я упростил это немного, работая только на первой кнопке радио подряд:

<table cellpadding="0" cellspacing="0" border="2"> 
    <tr> 
     <td><input type="radio" name="A" data-dependson=".maingroup-section"/></td> 
     <td><font size="2">Main Group</font></td> 
      <td><input type="radio" name="A" data-dependson=".subgroup-section"/></td> 
     <td><font size="2">Sub Group</font></td> 
      <td><input type="radio" name="A" data-dependson=".itemname-section" /></td> 
     <td><font size="2">Item Name</font></td> 
    </tr> 
</table> 

<div class="form-row"> 
    <div class="maingroup-section"> 
     field values related to main group:<br /> 
     <select id="maingroup"> 
      <option value="Null Value">Null Value</option> 

      <option value="1">AA</option> 
      <option value="2">BB</option> 
      <option value="3">CC</option> 
      <option value="Null Value">Null Value</option> 
     </select> 
     <input type="hidden" id="maingroup_value" /> 
    </div> 

    <div class="subgroup-section"> 
     field values related subgroup:<br /> 
     <select id="subgroup"> 
      <option value="Null Value">Null Value</option> 

      <option value="1">DD</option> 
      <option value="2">EE</option> 
      <option value="3">FF</option> 
      <option value="Null Value">Null Value</option> 

     </select> 
     <input type="hidden" id="subgroup_value" /> 
    </div> 

    <div class="itemname-section"> 
     field values related to itemname:<br /> 
     <select id="itemname"> 
      <option value="Null Value">Null Value</option> 

      <option value="1">GG</option> 
      <option value="2">HH</option> 
      <option value="3">II</option> 
      <option value="Null Value">Null Value</option> 

     </select> 
     <input type="hidden" id="itemname_value" /> 
    </div> 
</div> 

Первые вещи первых, вы заметите, использование data-attributes в этом случае его data-dependson, который содержит имя класса div, содержащего зависимый поля

JS

Начнитесь кэширования ссылки на все элементы, которые будут (аb), используемые:

var $aGroupRadioButtons = $("input[name='A']"); 
var $formRow = $(".form-row"); 
var $allDropdowns = $formRow.find("select"); 

Обращение с формами (.maingroup-section, .subgroup-section и т. Д.) Может быть абстрагировано в функции, как показано ниже, она относится к активной активной форме и скрывает и сбрасывает значение разделов формы сестры.

function handleFormSections($formSection) { 
    var $currentFormSection = $formSection.show(); 
    var $otherFormSections = $currentFormSection.siblings().hide(); 

    resetFormSections($otherFormSections); 
} 

И resetFormSections функция сбрасывает input и select элементов секций форм, предусмотренных аргументом

function resetFormSections($formSections) { 
    $formSections.find("select").val(""); 
    $formSections.find("input").val("") 
} 

Ну, вышеупомянутые две функций достаточно хорошо, чтобы показать зависимую форму раздел, скрыть и сбросить другие формы разделы.

Теперь вы можете подключить эти функции через обработчики событий, используя jQuery 1.8, поэтому я могу использовать синтаксис $(selector).on("event", handler).

$aGroupRadioButtons.on("click", function(e) { 
    var $radioItem = $(this); 
    var dependantSectionName = $radioItem.attr("data-dependson"); 
    var $dependantSectionElement = $(dependantSectionName); 

    handleFormSections($dependantSectionElement) 
}); 

Как из кода выше, его, глядя на значение data-dependson, чтобы определить, какой раздел формы, чтобы показать, а какие скрыть.

И где-то вдоль линии вы хотите удалить пустые или нулевые значения. Опять же, как насчет создания функции для обработки этого для нас? и, возможно, назвать его removeNullOrEmptyOptionsFrom(selectBox), который будет прислан переключателем элемента для работы, вот как:

function removeNullOrEmptyOptionsFrom(selectBox) { 
    var $selectBoxOptions = $(selectBox).children(); 

    $selectBoxOptions.each(function() { 
     var $option = $(this); 
     var optionValue = $option.attr("value"); 
     if (optionValue == "Null Value" || optionValue == "") { 
      $option.remove(); 
     } 
    }); 
} 

Теперь вы можете вызвать вышеуказанную функцию на каждом поле выбора в .form-row контейнере, как показано ниже:

$allDropdowns.each(function() { 
    removeNullOrEmptyOptionsFrom(this); 
}); 

я заметил в вашем коде есть вызов combobox метода, если это плагин JQuery, то, вероятно, хорошая идея, чтобы назвать это после того, как мы сняли все нулевые или пустые опции:

// $allDropdowns.combobox(); // initialize combox once maybe after reseting selects?