點擊事件和選項的值

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

小提琴http://jsfiddle.net/Varinder/tHXN3/1/

它被認爲是bad practice內聯JS事件的電話。

如果您發現重複三次以上的邏輯，Usualy是一個很好的重構指示。

，如果我錯了糾正我，你的要求是：

• 顯示一串或相關領域的基礎上選擇
• 重置所有未涉及到當前活躍的無線電按鈕等領域的單選按鈕
• 在頁面加載中刪除所有具有「空值」或簡單地爲空字符串的選擇框選項。

重構對事物HTML側一點點可以通過jQuery遍歷時，它很長的路要走：

繼承人我認爲結構將滿足您的要求（關於這一點進一步下跌）。而我只工作了第一個單選按鈕行上簡化了一點：第一

<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

開始通過緩存引用，這將是所有元素（AB）：

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

處理FormSections（.maingroup-section，.subgroup-section等）可以像下面的函數一樣抽象出來，它參考當前活動的表單部分並隱藏和重置同級表單部分的值。

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

    resetFormSections($otherFormSections); 
} 

而且resetFormSections函數復位由參數

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

井提供的表格部分的input和select元件，上述兩個功能是足夠好，以顯示依賴形式部分，隱藏和復位其它形式部分。

現在，您可以通過事件處理程序來連接這些函數，即時通訊使用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?