限制服務器填充HTML下拉列表（使用JavaScript）

我想嘗試使用JavaScript或其他解決方案更改或限制下拉列表。不幸的是，我無法控制HTML出現的方式，我試圖改變客戶端。下拉列表是服務器端生成的，但我們想給用戶額外的選項來進一步限制下拉列表中的選擇。限制服務器填充HTML下拉列表（使用JavaScript）

我們不能編輯生成的內容，但我們可以插入HTML。

一個建議的解決方案可能不可行，那就是使用JavaScript來限制下拉列表。例如，下拉遵循的格式：我想通過文本的開始，限制什麼

<SELECT ID="dropdown_1"> 
<OPTION VALUE="" >None 
<OPTION VALUE="1000">AB-ITEM 1 DESCRIPTION 
<OPTION VALUE="2001">AB-ITEM 2 DESCRIPTION 
<OPTION VALUE="50" >AB-ITEM 8 DESCRIPTION 
<OPTION VALUE="70" >BB-ITEM 3 DESCRIPTION 
<OPTION VALUE="100" >BB-ITEM 5 DESCRIPTION 
<OPTION VALUE="2" >ABB-ITEM 4 DESCRIPTION 
</SELECT>

，所以AB-，BB-，或在這種情況下ABB-。 value沒有韻或理由，它只是一個索引號。我不認爲這是可能的，因爲這只是文本，並不與屬性相關聯。

一個想法將是：

商店名單成JavaScript數組
只保留條目，如 'TYPE-X％'
刪除原始HTML列表
替換列表中存儲的新列表

但是，我不確定這是否可行，如果是，那麼需要創建這樣的c頌。任何幫助或引用的功能或例子將不勝感激。

來源

2013-03-08 Phillip

您是否打電話從客戶端到服務器以啓動select元素的填充？如果是這樣，請顯示此代碼 – 2013-03-08 19:14:02

我認爲這是PL/SQL，並且嘗試維護它是一件大事。任何更新都要求我們恢復所有非基線過程，因此我們儘可能遠離它們。 – Phillip 2013-03-08 19:17:45

一切皆有可能（使用jQuery）：

$(document).ready(function() { 
    $("#dropdown_1 option").hide(); 
    $("#dropdown_1 option").filter(":contains(TYPE-X)").show(); 
});

的優點與此的是，所有的選項都仍然存在，你就不能看到它們。因此，所有這將需要返回到默認列表將呼叫：對正則表達式

$("#dropdown_1 option").show();

編輯：

$(document).ready(function() { 
    $("#dropdown_1 option").hide(); 
    $("#dropdown_1 option").filter(function() { 
     return $(this).text().match(/^AB-/); 
    }).show(); 
});

可以使用正則表達式像上面看到的篩選列表。

編輯：有關jQuery的說明，this中的過濾函數是DOM元素本身。爲了訪問jQuery幫助器方法text()，我首先需要用上面編輯的jQuery函數來包裝那個DOM元素。

來源

2013-03-08 19:12:45 BinaryTox1n

我不認爲這可能是那麼簡單......但它就是這麼簡單！感謝你能這麼快回復。我能看到的唯一問題是，不是'TYPE-AB-'，而是'AB-'。所以我們可能會有'BB-'和'ABB-'類型，並且包含'BB-'會拉動兩者。有沒有辦法表示像正則表達式中的字符串或文本的開始（我認爲是'^'）。編輯：更新了問題以反映這一點。 – Phillip 2013-03-08 19:22:08

請注意，這些選項都不包含您不希望用戶訪問的信息，也不會讓用戶有能力做出不需要的操作。當他們被隱藏時，他們只是從聰明的用戶點擊右鍵。 – 2013-03-08 19:23:37

@Phillip我在我的答案中添加了一個正則表達式示例。另外，凱爾的觀點非常有效。任何與JS完成的事情都可以很容易地撤消。 – BinaryTox1n 2013-03-08 19:27:46

感謝BinaryTox1n，我找到了一條很好的路徑來找到我的問題的所有瀏覽器兼容的解決方案。但是，它與StackOverFlow上的其他解決方案拼成一個稍微不同的方法。

區別在於如何處理OPTION s。雖然.hide()適用於某些瀏覽器，但它不兼容IE8（也可能是其他一些瀏覽器）。 .hide()的替代品和變體也失敗了。 .hide()的另一個問題是您還需要使用.disable()。最後一個問題是，如果你有幾個（20個左右）選項，只有2或3個可見，Chrome瀏覽器（也可能是其他瀏覽器）不能正確顯示下拉框。

找到的最佳方法是.remove()不需要的選項。沒有兼容性問題，因爲OPTION只是被刪除。但是，如果需要，我也希望能夠靈活地添加選項。所以，下面就是我將要使用的一個版本：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    var regex_str = "^AAB-"; 
    var dd1 = $("#dropdown1 option"); 

    //Clone the 'None', Current, and All options into respective variables. 
    //All options are stored in order to allow different selection criteria 
    var all_Opt = dd1.clone(true); 
    var none_Opt = dd1.filter(":contains(None)").clone(true); 
    var cur_Opt = dd1.filter(function(){ 
     return $(this).text().match(regex_str); 
    }).clone(true); 

    //Remove all options and replace the 'None' and Current options 
    dd1.remove(); 
    noneOpt.appendTo($("#dropdown1")); 
    curOpt.appendTo($("#dropdown1")); 
}); 
</script>

我想補充的唯一事情是使用不同的下拉框或其他一些觸發能力改變這一點。

來源

2013-03-13 14:24:36 Phillip

限制服務器填充HTML下拉列表（使用JavaScript）

回答

相關問題