在javascript中构建动态下拉列表 [英] Building a dynamic dropdown in javascript

问题描述

我在网页上有16个唯一命名的下拉列表。当页面加载时，用户在任何下拉列表中都可以选择0到16的值。所有这些都是默认值。现在，除非值为0，否则当用户选择其中一个下拉列表的值时。我希望该值不是任何其他下拉列表的可用选项。这样一来，直到你到达最后一个下拉菜单，其中唯一的选项是最后一个可用的数字和零。问题是，它在Chrome和FireFox中工作正常，但我无法使其在IE中正常工作。当然，这个页面的大多数用户使用IE。解决方法是所有值都可以在所有下拉列表中使用，并且JavaScript检查表单上的值。

我附加了重要提升功能的代码，这个函数由每个下拉列表上的onchange事件调用。

 函数populatePoints（pointChosen）{
 for（var k = 1; k< 17; k ++）{
 pointValue = document.myform [ dropdown_+ k +_Points]。value 
 var theDropDown = document.myform [Dropdown_+ k +_Points]。options 
 theDropDown.remove 
 var x = 0 
 document.fbpool [Dropdown_+ k +_Points]。options [x] = new Option（0）
 x ++ 
 for（var i = 1; i< 17; i ++ ）{
 if（document.myform.Dropdown_1_Points.value！= i&&b $ b document.myform.Dropdown_2_Points.value！= i&& 
 document.myform.Dropdown_3_Points。 value！= i&&b $ b document.myform.Dropdown_4_Points.value！= i&&b $ b document.myform.Dropdown_5_Points.value！= i&& 
 document.myform.Dropdown_6_Points.value！= i&& 
 document.myform.Dropdown_7_Points.value！= i&& 
 document.myform.Dropdown_8_Points.value！=我&& 
 document.myform.Dropdown_9_Points.value！=我&& 
 document.myform.Dropdown_10_Points.value！= i&& 
 document.myform.Dropdown_11_Points.value！=我&& 
 document.myform.Dropdown_12_Points.value！=我&& 
 document.myform.Dropdown_13_Points.value！= i&& 
 document.myform.Dropdown_14_Points.value！=我&& 
 document.myform.Dropdown_16_Points.value！= i&& 
 document.myform.Dropdown_15_Points.value！= i）{
 document.myform [Dropdown_+ k +_Points]。options [x] = new Option（i）
 x ++ } 
} 
 document.myform [Dropdown_+ k +_Points]。value = pointValue 
} 
} 
  / pre> 
 
解决方案
如果你想尝试不同的方式，这应该适合你。作为一个奖励，您可以在页面中根据需要选择所需的数量。
 
 
 
 已编辑：修正了OP的帮助条件。 / p> 
 
 
  function matchValue（collection，value）{
 //我们需要这个来找一个值
 //在一组值中，因为IE< 9 
 //不支持.indexOf（）。 
（var i = 0; i< collection.length; i ++）{
 if（collection [i] == value）{
 return true; 
} 
} 
 
 return false; 
} 
 
函数populatePoints（pointChosen）{
 //抓住所有选择。 
 var sels = document.querySelectorAll（'select'）; 
 //查询返回的选择次数。 
 var count = sels.length; 
 //选择的值已更改。 
 var pointChosenVal = pointChosen.value; 
 //数组保留所有选择的当前值。 
 var chosenValues = [count]; （var i = 0; i< count; i ++）
 
 {
 //保持当前值。 
 selectedValues [i] = sels [i] .value; 
} 
 
 for（var i = 0; i< count; i ++）{
 //此选择的当前值。 
 var thisSelVal = sels [i] .value; 
 
 //删除其所有选项。 
 sels [i] .options.length = 0; 
 
 //由于我们的选择有一个额外的选项（value = 0），
 //并且考虑到选项的数量=选择的数量，
 //我们增加对于（var k = 0; k <= count; k ++）的
 {
 if（k == 0 || 
（sels [i] == pointChosen& & pointChosenVal！= 0）|| 
（（sels [i]！= pointChosen || pointChosenVal == 0）&&（k == thisSelVal ||！matchValue（selectedValues，k））） {
 var opt = document.createElement（'option'）; 
 opt.value = k; 
 opt.text = k.toString（）; 
 opt.selected =（k == thisSelVal）; 
 
 sels [i] .add（opt）; 
} 
} 
} 
} 
  
 strong>注意：我已将更改事件处理程序附加到如下选项：
  onchange =populatePoints （这）
  
 演示 
 
I have 16 uniquely named dropdowns on a web page. When the page loads, the user has the option on any of the dropdowns to select a value of 0 to 16. 0 is the default on all of them. Now, unless the value is 0, when a user selects a value for one of the dropdowns. I want that value to not be an available option for any of the other dropdowns. This continues until you get to the last dropdown where the only options are the last available number and zero. The issue is, it works fine in Chrome and FireFox, but I can't get it to work correctly in IE. Of course, the majority of the users of the page use IE. The workaround being that all values are always available on all dropdowns, and the javascript checks the values on form post. 

I attached the code for the function that does the heavy lifting, this function gets called by an onchange event on each of the dropdowns.
 function populatePoints(pointChosen){
     for (var k=1; k< 17; k++){
       pointValue = document.myform["Dropdown_" + k + "_Points"].value
       var theDropDown = document.myform["Dropdown_" + k + "_Points"].options
       theDropDown.remove
       var x = 0
       document.fbpool["Dropdown_" + k + "_Points"].options[x] = new Option(0)
       x++
       for (var i=1;i<17;i++) {
         if (document.myform.Dropdown_1_Points.value != i &&
             document.myform.Dropdown_2_Points.value != i &&
             document.myform.Dropdown_3_Points.value != i &&
             document.myform.Dropdown_4_Points.value != i &&
             document.myform.Dropdown_5_Points.value != i &&
             document.myform.Dropdown_6_Points.value != i &&
             document.myform.Dropdown_7_Points.value != i &&
             document.myform.Dropdown_8_Points.value != i &&
             document.myform.Dropdown_9_Points.value != i &&
             document.myform.Dropdown_10_Points.value != i &&
             document.myform.Dropdown_11_Points.value != i &&
             document.myform.Dropdown_12_Points.value != i &&
             document.myform.Dropdown_13_Points.value != i &&   
             document.myform.Dropdown_14_Points.value != i && 
             document.myform.Dropdown_16_Points.value != i && 
             document.myform.Dropdown_15_Points.value != i){
             document.myform["Dropdown_" + k + "_Points"].options[x] = new Option(i)
             x++}
         }
       document.myform["Dropdown_" + k + "_Points"].value = pointValue
      } 
  }

解决方案
If you want to try a different way, this should work for you. As a bonus, you can have as many selects as you need in the page.

Edited: Fixed if conditional with the OP's help.
function matchValue(collection, value) {
    // We need this to look for a certain value
    // in a collection of values because IE < 9
    // doesn't support .indexOf().
    for (var i = 0; i < collection.length; i++) {
        if (collection[i] == value) {
            return true;
        }
    }

    return false;
}

function populatePoints(pointChosen) {
    // Grab all your selects.
    var sels = document.querySelectorAll('select');
    // The number of selects returned by the query.
    var count = sels.length;
    // Value of the select changed.
    var pointChosenVal = pointChosen.value;
    // Array to keep the current values for all selects.
    var chosenValues = [count];

    for (var i = 0; i < count; i++) { 
        // Keeping the current values.
        chosenValues[i] = sels[i].value;
    }

    for (var i = 0; i < count; i++) {
        // The current value of this select.
        var thisSelVal = sels[i].value;

        // Remove all its options.
        sels[i].options.length = 0;

        // As our selects have an extra option (value = 0),
        // and considering that the number of options = number of selects,
        // we increase the count by 1.
        for (var k = 0; k <= count; k++) {  
            if (k == 0 || 
                (sels[i] == pointChosen && pointChosenVal != 0) || 
                ((sels[i] != pointChosen || pointChosenVal == 0) && (k == thisSelVal || !matchValue(chosenValues, k)))) {
                var opt = document.createElement('option');
                opt.value = k;
                opt.text = k.toString();
                opt.selected = (k == thisSelVal);

                sels[i].add(opt);
            }
        }
    }
}
Note: I've attached the change event handler to the selects like this:
onchange="populatePoints(this)"
Demo

                        
这篇关于在javascript中构建动态下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！