添加的選擇選項動態地從陣列從Java腳本

我有2個選擇輸入在我的HTML頁面添加的選擇選項動態地從陣列從Java腳本

<select id="parent"> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
</select>

而且

<select name="selectOpt" id="dmSelect"> 
<option disabled selected >-Select an Option-</option> 
</select>

現在我需要添加取決於parent

價值的一些選項

假設選擇one選項selectOpt將選擇

<option value="a1">a1</option> 
<option value="a2">a2</option>

如果two選擇的selectOpt選項將

<option value="b1">b1</option> 
<option value="b2">b2</option>

和這些選項將來自一些陣列
像

A=["a1","a2"...] 
B=["b1","b2"...]

來源

2014-09-02 Saif

我能得到parent'使用jQuery的'選擇的值，並且可以使用附加的HTML的任何元素（「＃..」）。附加（）。 – Saif 2014-09-02 06:13:29

檢查這個小提琴http：// jsfiddle。net/fpxqghj8/ – 2014-09-02 06:14:42

兩個數組：

A=[{display: "a1", value: "a1" }, 
    {display: "a2", value: "a2" }, 
    ........ 
    ] 

B=[{display: "b1", value: "b1" }, 
{display: "b2", value: "b2" }, 
........ 
]

現在的變化

$('#parent').change(function() { 
var parent = $(this).val(); 
$("#dmSelect").html("");` 

switch(parent) { 
    case 1: 
     $(A).each(function (i) 
     { 
     $("#dmSelect").append("<option value=\""+A[i].value+"\">"+A[i].display+"   </option>"); 
     }); 

     break; 
    case 2: 
     $(B).each(function (i) 
     { 
     $("#dmSelect").append("<option value=\""+B[i].value+"\">"+B[i].display+"</option>"); 
     }); 

     break; 
     default: 
    } 
});

來源

2014-09-03 04:07:19 Asif

請添加關於您的代碼片段如何工作的說明:) – khakiout 2014-09-03 04:09:53

這裏是你如何與普通的做javascript：

<select id="parent" onChange="addOption()"> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
</select>

然後在腳本：

function addOption(){ 
    var e = document.getElementById("parent"); 
    var strUser = e.options[e.selectedIndex].text; 

    if(strUser == 'One'){ 
    selecOpt = document.getElementById('dmSelect'); 

    var opt = document.createElement('option'); 
    opt.value = 'a1'; 
    opt.innerHTML = a1; 
    selecOpt.appendChild(opt); 

    opt = document.createElement('option'); 
    opt.value = 'a2'; 
    opt.innerHTML = a2; 
    selecOpt.appendChild(opt); 

    } 
    else if(strUser == 'Two'){ 
    selecOpt = document.getElementById('dmSelect'); 

    var opt = document.createElement('option'); 
    opt.value = 'b1'; 
    opt.innerHTML = b1; 
    selecOpt.appendChild(opt); 

    opt = document.createElement('option'); 
    opt.value = 'b2'; 
    opt.innerHTML = b2; 
    selecOpt.appendChild(opt); 

    } 
}

來源

2014-09-02 06:12:28

做這樣的事情，

$('#parent').on('change', function(e) { 
    var that = $(this).val(); 
    switch(that) { 
     case 1: 
      $("#dmSelect").append(
      $('<option/>', { 
       value: a1, 
       html: a1 
      },{ 
       value: a2, 
       html: a2 
      }) 
      ); 
     }); 
      break; 
     case 2: 
      $("#dmSelect").append(
      $('<option/>', { 
       value: b1, 
       html: b1 
      },{ 
       value: b2, 
       html: b2 
      }) 
      ); 
     }); 
      break; 
     default: 
      //default code block 
    }

來源

2014-09-02 06:13:41 VPK

那麼這是有幫助的，不知道如何設置數值和數組，如'A = [「a1」，「a2」...] B = [「b1」，「b2」]' – Saif 2014-09-02 06:16:21

@Saif，Array就像'A = [「a1」，「a2」...]'使用正確的符號，並且Vaibhav給了你前進的方向，擴展它以滿足你的需求。你能指望什麼？如果你想要工作，然後聘請一些開發人員。 – Satpal 2014-09-02 06:17:05

您可以使用父母select元素中的選定值作爲從數組中獲取值的索引，如A [that] .. @Saif如果您發現我的答案有幫助，那麼您可以接受它。 – VPK 2014-09-02 06:29:10

你應該嘗試自己解決問題，如果你的卡，我們可以提供幫助。

首先，您需要創建一個函數，用於觸發您選擇的值change()的值的更改。然後你需要得到這個選擇的價值val()。接下來，將您的選項的值和取決於您的append()的值相比較，以選擇下一個。

如果您先嚐試一些東西，我們可以幫助您，您將學到更多東西，然後複製粘貼。

來源

2014-09-02 06:13:42 TeeDeJee

Here is the sample code. Here I have appended new values. Instead of that by making ajax call you can get options values from db too. 

$("#parent").on("change",function(){ 
if ($(this).val() == "one") 
{ 
var newValue = '<option value="b1">b1</option>'; 
newValue += '<option value="b2">b2</option>'; 
$("#dmSelect").append(newValue); 
} 
});

來源

2014-09-02 06:14:42 teshvenk

$(document).ready(function() { 
    $("#parent").change(function() { 
     var $dmSelect = $("#dmSelect"); 
     $dmSelect.empty().append("<option disabled selected >-Select an Option-</option>") 
     if ($(this).find("option:selected").val() == "1") { 
      $dmSelect.append("<option value='a1'>A1</option>") 
       .append("<option value='a2'>A2</option>") 
     } else if ($(this).find("option:selected").val() == "2") { 
      $dmSelect.append("<option value='b1'>B1</option>") 
       .append("<option value='b2'>B2</option>") 
     } 
     /*other if elses*/ 


    }).change(); 
});

這裏的小提琴http://jsfiddle.net/vikrant47/spcmLydq/

來源

2014-09-02 06:19:48

這裏，你可以很容易地適應您的需求，閱讀一些陣列中的二次選擇的解決方案。

JS：

//make one array from all your sub-arrays 
var A = ['a1','a2','a3']; 
var B = ['b1','b2']; 
var arr = [A,B]; 

//grabs the first sub-array by default 
$(function() {changeOpts(1);}); 

//changing the parent grabs the appropriate sub-array 
$('#parent').on('change', function() { 
    changeOpts($(this).val()); 
}); 

//forms a string with a bunch of <option> tags, then puts that inside #dmSelect  
function changeOpts(parentOpt) { 
    var str = '<option disabled selected >-Select an Option-</option>'; 
    var arr2 = arr[parentOpt-1]; 
    var len = arr2.length; 
    for (var i=0; i<len; i++) { 
     var value = arr2[i]; 
     str += '<option value="' + value + '">' + value + '</option>'; 
    } 
    $('#dmSelect').html(str); 
}

這裏有一個fiddle。

來源

2014-09-02 06:34:30 flowstoneknight

添加的選擇選項動態地從陣列從Java腳本

回答

相關問題