两个html选择冲突

Question

我有两个html选择元素，第一个被禁用，只有当用户从第一个选择中选择一个选项时才会启用。考虑我们在第一个选择中有2个选项 - ＆gt; a，b如果用户选择a：在第二个选择选项中应该是：a1，a2如果用户选择b：在第二个选择选项中应该是：b1，b2 ...我不知道我做错了这两个选择选项之间存在冲突!!!

<select id="main-category" required>
    <option disabled selected> choose one option </option>
    <option value="a"> a </option>
    <option value="b"> b </option>  
</select>
<select id="sub-category" required disabled> </select>
<!-- empty select -->
<script>
    document.getElementById("main-category").onchange = function() {
        document.getElementById('sub-category').disabled = false;
        var opt0 = document.createElement('option');
        var opt1 = document.createElement('option');
        if (this.value == 'a') {
             //first remove all previous options then add new ones
            if (document.getElementById('sub-category').getElementsByTagName('option')[0]) {//check if there is a option then remove it
                var opt = document.getElementById('sub-category').getElementsByTagName('option')[0];
                document.getElementById('sub-category').removeChild(opt);
            }
            if (document.getElementById('sub-category').getElementsByTagName('option')[1]) {//check if there is a option then remove it
                var opt = document.getElementById('sub-category').getElementsByTagName('option')[1];
                document.getElementById('sub-category').removeChild(opt);
            }
            opt0.value = "a1";
            opt0.innerHTML = "a1";
            opt1.value = "a2";
            opt1.innerHTML = "a2";
            document.getElementById('sub-category').appendChild(opt0);
            document.getElementById('sub-category').appendChild(opt1);
        } else if (this.value == 'b') {
            //first remove all previous options then add new ones
            if (document.getElementById('sub-category').getElementsByTagName('option')[0]) { //check if there is a option then remove it
                var opt = document.getElementById('sub-category').getElementsByTagName('option')[0];
                document.getElementById('sub-category').removeChild(opt);
            }
            if (document.getElementById('sub-category').getElementsByTagName('option')[1]) {//check if there is a option then remove it
                var opt = document.getElementById('sub-category').getElementsByTagName('option')[1];
                document.getElementById('sub-category').removeChild(opt);
            }
            opt0.value = "b1";
            opt0.innerHTML = "b1";
            opt1.value = "b2";
            opt1.innerHTML = "b2";
            document.getElementById('sub-category').appendChild(opt0);
            document.getElementById('sub-category').appendChild(opt1);
        }
    };

</script>

Answer 1

每次在第一个选项中进行选择时，您需要做的就是清除第二个下拉列表中的先前条目。

＆＃13;

＆＃13;

<select id="main-category" required>
    <option disabled selected> choose one option </option>
    <option value="a"> a </option>
    <option value="b"> b </option>  
</select>
<select id="sub-category" required disabled> </select>
<!-- empty select -->
<script>
    document.getElementById("main-category").onchange = function() {
       
       // Clear out the second list before adding new items to it
       document.getElementById('sub-category').innerHTML = "";
       // *******************************************************
    
        document.getElementById('sub-category').disabled = false;
        var opt0 = document.createElement('option');
        var opt1 = document.createElement('option');
        if (this.value == 'a') {
             //first remove all previous options then add new ones
            if (document.getElementById('sub-category').getElementsByTagName('option')[0]) {//check if there is a option then remove it
                var opt = document.getElementById('sub-category').getElementsByTagName('option')[0];
                document.getElementById('sub-category').removeChild(opt);
            }
            if (document.getElementById('sub-category').getElementsByTagName('option')[1]) {//check if there is a option then remove it
                var opt = document.getElementById('sub-category').getElementsByTagName('option')[1];
                document.getElementById('sub-category').removeChild(opt);
            }
            opt0.value = "a1";
            opt0.innerHTML = "a1";
            opt1.value = "a2";
            opt1.innerHTML = "a2";
            document.getElementById('sub-category').appendChild(opt0);
            document.getElementById('sub-category').appendChild(opt1);
        } else if (this.value == 'b') {
            //first remove all previous options then add new ones
            if (document.getElementById('sub-category').getElementsByTagName('option')[0]) { //check if there is a option then remove it
                var opt = document.getElementById('sub-category').getElementsByTagName('option')[0];
                document.getElementById('sub-category').removeChild(opt);
            }
            if (document.getElementById('sub-category').getElementsByTagName('option')[1]) {//check if there is a option then remove it
                var opt = document.getElementById('sub-category').getElementsByTagName('option')[1];
                document.getElementById('sub-category').removeChild(opt);
            }
            opt0.value = "b1";
            opt0.innerHTML = "b1";
            opt1.value = "b2";
            opt1.innerHTML = "b2";
            document.getElementById('sub-category').appendChild(opt0);
            document.getElementById('sub-category').appendChild(opt1);
        }
    };

</script>

＆＃13;

＆＃13;

＆＃13;

但是，除此之外，您的代码需要进行相当多的清理，因为当您已经找到它时，您不应该一遍又一遍地扫描文档以查找要使用的元素。之前。这非常浪费。

此外，.innerHTML用于传递包含HTML的字符串，以便HTML解析器可以解析字符串并相应地更新DOM。您只是设置了没有HTML的纯字符串，因此您应该使用.textContent代替，它不会调用HTML解析器并且效率更高。

下一步（仅供参考），如果您希望option的值与显示给用户的文字相同，则无需设置value那个option。默认情况下，value是option元素的内容。

实际上，只需根据list1中选择的选项的第一个字母在list2中创建新选项，就可以简化整个操作。

＆＃13;

＆＃13;

// Get references to the elements you'll be working with just once:
var list1 = document.getElementById("main-category");
var list2 = document.getElementById('sub-category');

list1.onchange = function() {

  list2.disabled = false;
  
  var newHTML = "";  // A string that will contain the new HTML for the second list
  
  // Loop the amount of times we find <option> elements in list one, but start
  // at the second one to account for the first one, which isn't really a true choice
  for(var i = 1; i < list1.querySelectorAll("option").length; i++){
    // Build up a string that the new option should be made from using the 
    // first character from the option found in list 1
    newHTML += '<option>' + list1.value.substr(0,1) + i + '</option>';
  }
  
  // By setting a new value for .innerHTML, the old values get thrown out.
  list2.innerHTML = newHTML;
};

＆＃13;

<select id="main-category" required>
    <option disabled selected> choose one option </option>
    <option>a</option>
    <option>b</option>  
</select>
<select id="sub-category" required disabled> </select>

＆＃13;

＆＃13;

＆＃13;