添加的选择选项动态地从阵列从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脚本

回答

相关问题