基於輸入值的jQuery顯示/隱藏選項

我有一個表單需要根據用戶的ZIP在上面的數字字段中顯示特定的選擇選項（「位置」）。在這個例子中，我需要選項「超出範圍」來隱藏和「In Range」，當用戶在輸入中輸入「12345」時顯示。基於輸入值的jQuery顯示/隱藏選項

這是我的HTML：

<!--Zip--> 
<div class="zip-field"> 
    <label for="zip">Zip Code</label> 
    <input type="number" id="zip" name="zip" /> 
</div> 

<!--Location--> 
<div class="location-field"> 
    <label for="location">Location</label> 
    <select id="location" name="location"> 
    <option value="In Range">In Range</option> 
    <option value="Out of Range">Out of Range</option> 
    </select> 
</div>

這是我的jQuery：

$('#zip').on('change',function(){ 
if ($(this).val() == "12345") { 
    $("#location option[value='In Range']").show(); 
    $("#location option[value='Out of Range']").hide(); 
}

}）;

應該很簡單，但沒有雪茄。

來源

2013-09-26 Andrew

隱藏選項元素不具備跨瀏覽器的支持......你需要將其刪除 –

隱藏的選項將不跨瀏覽器工作，這是一樣的約束力事件選項元素，你能做的只有非常有限的東西與他們。而是刪除它們並將其緩存起來以備後用。

$(function(){ 
    var $location = $('#location'); 
    $location.data('options', $location.find('option')); //cache the options first up when DOM loads 
    $('#zip').on('change', function() { //on change event 
     $location.html($location.data('options')); //populate the options 
     if ($(this).val() == "12345") { //check for condition 
      $location.find("option[value='Out of Range']").remove(); //remove unwanted option 
     } 

    }); 
});

Fiddle

來源

2013-09-26 01:12:34 PSL

爲什麼這樣做時，您可以通過將選擇器的值設置爲匹配選項值來選擇所需的選項？例如。 '$（「＃location」）。val（「In Range」）;' –

@RickHanlonII請參閱OP。他想隱瞞他們。完全閱讀問題。如果只是設置一個值，他甚至可能不會在這裏問這個問題......非常簡單直接的權利...... – PSL

@RickHanlonII是的，我需要用戶仍然有能力從列表中選擇一個。 :(我應該在這個例子中提到，讓我試試PSL的...... – Andrew

您應該監視的價值，因爲它改變了使用下面的方法：

$('#zip').on('keyup',function(){ 
    $("#location").val('Out Of Range'); 
    if ($(this).val() == "12345") { 
     $("#location").val('In Range'); 
    } 
});

的功能上結合事件收聽該元素。 keyup事件監聽密鑰在您的字段內釋放的時間。然後，您可以將該值與所需的值進行比較，並根據需要顯示/隱藏。

來源

2013-09-26 00:57:15 Chausser

謝謝！我更新了我的代碼以反映您的代碼。。。但我仍然無法完成它的工作。：/ – Andrew

@Andrew這是因爲你「展示」你想要的選擇的方式。看到我的答案是正確的方式來做到這一點。 –

他是對的，我沒有仔細看你的問題，以實現你的選擇器在哪裏。更新我的回答 – Chausser

有需要改變這裏兩件事情：

您需要一個事件處理程序設置爲zip input元素。 $('#zip').val(...);僅在執行該行時設置值一次。
您需要更好地選擇該選項。 $("#location option[value='In Range']").show();不會顯示您想要的選項。您必須將選擇器輸入的值設置爲與所需選項相匹配的值。

你的JavaScript改成這樣：

$("#zip").on('blur', function(){ 
    if ($(this).val() == "12345") { 
     $("#location").val("In Range"); 
    }else{ 
     $("#location").val("Out of Range"); 
    } 
});

請注意，我用$('#zip').on('blur', ...);到register an event handler，將其設置爲blur event和傳遞函數即可當事件觸發執行。

然後我將location選擇器輸入的值設置爲您要選擇的選項的正確值。

DEMO

來源

2013-09-26 01:06:01

這真棒。感謝您的簡潔！我一定會在以後使用它。但我需要隱藏它，以便用戶仍然可以選擇一個選項。對不起，我應該在例子中說清楚。。。 – Andrew

謝謝，我誤解了你的意思是'隱藏'。 –

基於輸入值的jQuery顯示/隱藏選項

回答

相關問題