基于层次结构重置选择下拉列表

Question

<script>
function refresh()
{
    document.forms[0].submit();
}   
</script>

<select name = "firstoption" onChange ="refresh()"></select>
<option value = "">default option</option>
<option value = "1">1</option>

if($_POST['firstoption]!= "")
<select name = "secondoption" onChange ="refresh()"></select>
<option value = "">default option</option>
<option value = "2">2</option>

if($_POST['secondoption]!= "" && $_POST['firstoption]!= "")
<select name = "thirdoption" onChange ="refresh()"></select>
<option value = "">default option</option>
<option value = "3">3</option>

if($_POST['thirdoption]!= "" && $_POST['secondoption]!= "" && $_POST['firstoption]!= "")
<select name = "fourthoption" onChange ="refresh()"></select>
<option value = "">default option</option>
<option value = "4">4</option>

嗨,

我有6次静态跌落。(由于某种原因，我目前有笔记本问题，所以无法复制和粘贴我写下泛型值的代码)

删除(不再是我自己解决的问题)

基本上，我需要6个下拉列表(在刷新后保存的所有值)，当下拉列表值更改时，它下面的所有下拉列表都会被重置。

编辑：

我正在寻找代码将select选项重新设置为默认的select选项(基于层次结构)。一旦上面有一个选择选项，它就会发生变化。因此，如果选择"2“获得更改，则选择3,4,5 6值应改为默认选项。如果选择"4“获得更改，选择5,6将更改为默认选项等。

我不想要ajax或jQuery。我正在寻找一个使用php、javascript或html的解决方案。我认为处理这个问题的方法是比较前面的选择选项的索引号和新的索引号。

注意，我提供的代码是sudo代码，由于当前的膝上型计算机状态，我无法复制和粘贴代码。

所以答案不需要使用我的代码。

我只想要一个php/javascript/html代码，它有多个select选项(4-6 select，每个选项2)，另一个下拉列表将被禁用，直到上面的select得到一个值。所以选项2-6将被禁用，直到选择1被选中，然后选项3-6将被禁用，直到选项2的值被选中为止)。

如果用户更改，select 1选项将选择2-6已经有一个值。选择2-6自动切换到默认选项值.选项3-6现在被禁用，直到用户选择选择2的选项为止。

另外，堆栈溢出直到24小时才允许赏金，所以我在明天这个时候才能给出赏金。

Answer 1

促进解决办法的一些建议：

• 给出了所有下拉列表中相同的class属性，
• 只在容器元素(或整个文档)上使用一个更改事件处理程序，并让处理程序找出哪个select值是class--给定一个索引后，该函数将清除该索引中的所有下拉列表，并禁用所有下拉列表，除了第一个(该索引处)。
• 在事件处理程序中调用此函数，并在页面加载时调用该函数，从而初始化这些下拉列表的启用/禁用状态。

f 211

下面是如何做到这一点。我删除了这个解决方案所不需要的所有HTML，但当然您可能需要更多的HTML属性用于其他目的：

​

const dropDowns = Array.from(document.querySelectorAll(".option"));

function reset(i) {
    for (let other of dropDowns.slice(i)) {
        other.selectedIndex = 0;
        other.disabled = other !== dropDowns[i];
    }
}

document.addEventListener("change", function (e) {
    let i = dropDowns.indexOf(e.target);
    if (i < 0) return;
    // only allow input in next one if current value is not default:
    reset(i+(dropDowns[i].selectedIndex > 0));
});

reset(0); // on page load, disable all except first one

<select class="option">
  <option>default option</option>
  <option>1</option>
  <option>2</option>
</select>

<select class="option">
  <option>default option</option>
  <option>A</option>
  <option>B</option>
</select>

<select class="option">
  <option>default option</option>
  <option>x</option>
  <option>y</option>
</select>

<select class="option">
  <option>default option</option>
  <option>alpha</option>
  <option>beta</option>
</select>  

​

更多关于以下内容：

reset(i+(dropDowns[i].selectedIndex > 0));

当第一个条目(默认)被选中时，dropDowns[i].selectedIndex将为0，而当选择任何其他条目时，则为一个严格的正数。因此，对于> 0，这实际上为选择非默认条目时提供了true，否则为false。

现在，我们希望使下一个下拉列表只有在当前的下拉列表中选择了一个非默认条目时才可用，即当这个> 0表达式是true时。通过将该表达式包含在+操作中，我们将该布尔值转换为一个数字( false为0，true为1)。因此，整个表达式要么是i+0，要么是i+1，这取决于当前下拉列表是否选择了默认值。

通过将该索引(i或i+1)提供给reset函数，我们确保选择默认值的效果与选择默认值的效果类似。

Answer 2

要做到这一点，有很多方法。下面的选项应该适用于任意数量的复选框。对代码进行注释以解释这些步骤。

​

<form accept="#" method="POST" id="myform">
    <div>
        <select name="firstoption">
            <option value="">default option</option>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </div>
    <div>
        <select name="secondoption" disabled>
            <option value="">default option</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </div>
    <div>
        <select name="thirdoption" disabled>
            <option value="">default option</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
    </div>
    <div>
        <select name="fourthoption" disabled>
            <option value="">default option</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>
    </div>
    <div>
        <input type="submit" value="Submit">
    </div>
</form>


<script>

//get references to the DOM elements we need
var form = document.getElementById('myform');
var selects = form.querySelectorAll('select');

//register event listeners for each of the select boxes so we know when the value changes
for( let i=0; i<selects.length; i++ ) {
    selects[i].addEventListener('change', function(evt) {
        
        //select box "i" has changed
        //since the value changed, reset other boxes after to the default value and disable
        for( let i2 = (i+1); i2 < selects.length; i2++ ) {
            selects[i2].value = "";
            selects[i2].disabled = true;

        }

        //if the value of the changed select box is not the default, enable the next one
        if( selects[i].value !== "" && selects[i+1] ) {
            selects[i+1].disabled = false;
        }

    });
}

//catch form submission so we can validate the select boxes
form.addEventListener('submit', function(evt) {

    //ensure we have all values before submitting
    try {
        for( let i=0; i<selects.length; i++ ) {
            if( selects[i].value === "" ) {
                alert(`Please select an option for box number ${i+1}`);
                throw 0;
            }
        }
    }catch(e) {
        //error, prevent submission
        evt.preventDefault();
        return false;
    }

    //all good, submit
    return true;
});
</script>

​

Answer 3

您可以为每个下拉列表添加数据属性，这样您就可以跟踪该下拉列表的索引，因此所有更改都高于索引应用操作。当选项被选中时，重置其余的按顺序排列的框。如果previus复选框不默认，则启用“下一步”框，否则禁用它。

​

var selects = document.getElementsByClassName("select")


for(var i = 0; i < selects.length; i++){
  
  selects[i].addEventListener('change', function(e){
  
for(var x = 0; x < selects.length; x++){
      
      //On select, reset selectboxes that commes after  
      if(Number(e.target.dataset.columns) < x){
        selects[x][0].selected = true;   
        
      }
      //If previus select box not default, enable next box
      if(x > 0 && selects[x -1][0].selected != true){
        selects[x].disabled = false; 
      }
      //else dissable next box..
      else if(x > 0 && selects[x -1][0].selected == true){
        selects[x].disabled= true; 
      }
  
}

  })
  
}

<select data-columns="0" class="select">
  <option value = "">default option</option>
  <option value = "1">1</option>
  <option value = "1">1</option>
</select>

<select  data-columns="1" disabled class="select">
  <option value = "">default option</option>
  <option value = "2">2</option>
  <option value = "1">1</option>
</select>
<select  data-columns="2" disabled class="select">
  <option value = "">default option</option>
  <option value = "3">3</option>
  <option value = "1">1</option>
</select>

<select data-columns="3" disabled class="select">
  <option value = "">default option</option>
  <option value = "4">4</option>
  <option value = "1">1</option>
</select>  

​