Question

您好，我想知道您是否可以提供帮助，当用户指定他们的性别类型时，我需要使用JavaScript以适当的选项填充衣服选项框。这是我到目前为止的代码，

<script type="text/javascript">
var subListArray = [];
subListArray[0] = 'Select a type first';
subListArray[1] = ['skirt', 'dress', 'tights'];
subListArray[2] = ['jeans', 'hat'];
</script>

人

       Gender Type: <select name="genderType" id="genderType" >
      <option value="">Gender Type?</option>
      <option value="girl">Female</option>
      <option value="boy">Male</option>
    </select> </br>

        Clothes <select name="clothType">
      <option value="">Choose a Type</option>
    </select>

Answer 1

使用对象而不是数组，以便您可以将subList映射到所选的性别。你不有来做这件事，但它简化了一些事情。向“性别选择器”添加“更改”侦听器，为新选择框创建选项元素：

var subListArray = {
    'default': ['Select a type first'],
    'girl': ['skirt', 'dress', 'tights'],
    'boy': ['jeans', 'hat'],
};

document.getElementById('genderType').addEventListener('change', function () {
    var sel = document.getElementById('clothType'),
        value = this.value ? this.value : 'default';
    sel.innerHTML = '';
    subListArray[value].forEach(function (item) {
       sel.appendChild(new Option(item));
    });
});

http://jsfiddle.net/VdXk6/

Answer 2

请参阅此页面，其中介绍了向DOM添加元素： http://www.javascriptkit.com/javatutors/dom2.shtml

您需要使用createElement，setAttribute和appendChild。 E.g：

HTML：

<select id="mySelect">...</select>
<select id="mySubSelect"></select>

的javascript：

var myNewOption = document.createElement( 'option' );
myNewOption.setAttribute( 'value', 'myOptionValue' );
document.getElementById( 'mySubSelect' ).appendChild( myNewOption );

这可以循环进行。您还可以检测选择的更改时间如下：

的javascript：

document.getElementById('mySelect').addEventListener('change',function(){
    document.getElementById('mySelect').selectedIndex; // a number showing which element is selected
});

使用jQuery会更容易。

Javascript用数组填充选项框

人

2 个答案: