从javascript中添加从数组中动态选择的选项

时间:2014-09-02 06:04:49

标签: javascript jquery html

我的HTML页面中有2个选择输入

<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>

如果选择twoselectOpt的选项将为

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

这些选项将来自某些数组 喜欢

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

7 个答案:

答案 0 :(得分:2)

做这样的事,

$('#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
    }

答案 1 :(得分:0)

以下是使用普通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);

  }
}

答案 2 :(得分:0)

您应该尝试自己解决问题,如果遇到困难,我们可以提供帮助。

首先,你需要创建一个触发select change()值更改的函数。 然后,您需要获取此select val()的值。 接下来,将您的选项的价值和值append()与下一个选项进行比较。

如果您先尝试一下我们可以帮助您,您将学到更多东西,然后再复制粘贴。

答案 3 :(得分:0)

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);
}
});

答案 4 :(得分:0)

$(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/

答案 5 :(得分:0)

这是一个可以轻松适应您需求的解决方案,从某些阵列中读取辅助选项。

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

答案 6 :(得分:0)

两个阵列:

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:
     }
});