从一个选择标签中选择值后禁用选择值 - disable select value after selecting a value from one select tag

disable select value after selecting a value from one select tag

本文关键字：选择标签一个 | 更新日期: 2023-09-27

我有两个选择选项用于时间选择，如果我选择一个值，比如从一个选择标签中选择一个值，比如上午 9：00 应该从其他选择标签代码中禁用 9：00am

是

<select>
<option value="9:00am">9:00am</option>
<option value="10:00am">10:00am</option> </select> so on.

<select>
<option value="9:00am">9:00am</option>
<option value="10:00am">10:00am</option> </select> so on..

这是两个选择标签..

提前致谢，

阿米斯

我认为这可能是您要找的

http://codepen.io/anon/pen/xegKj

.html：

<select id="TimeFirst" onChange="fSetTimeOptions(this,'TimeSecond');">
  <option value="9:00am">9:00am</option>
  <option value="10:00am">10:00am</option>
</select>
<select id="TimeSecond" onChange="fSetTimeOptions(this,'TimeFirst');">
  <option value="9:00am">9:00am</option>
  <option value="10:00am">10:00am</option>
</select>

.js：

function fSetTimeOptions(selObj, fvOtherSel) {
  var OtherSel = document.getElementById(fvOtherSel);
  var TimeValue = selObj.options[selObj.selectedIndex].value;
  alert(TimeValue);
  for (var i = 0; i < OtherSel.options.length; i++) {
         if (OtherSel.options[i].value == TimeValue) {
             OtherSel.options[i].disabled = true;
         } else {
             OtherSel.options[i].disabled = false; 
         }
  }
}

HTML 代码：

<select id="sel1" onchange="disableSelect(this);">
<option value="9:00am">9:00am</option>
<option value="10:00am">10:00am</option> </select>
<select id="sel2">
<option value="9:00am">9:00am</option>
<option value="10:00am">10:00am</option> </select>

Javascript ：

function disableSelect(content) {
  var val = content.value;
  var mySel = document.getElementById("sel2");
  for (var i = 0; i < mySel.options.length; i++) { 
    if (mySel.options[i].value == val) {
      mySel.options[i].disabled=true;
    }
    else {
      mySel.options[i].disabled=false;
    }
  } 
}

您必须使用当前选择的值在其他选择中找到该选项：

if (mySel.options[i].value == val) {
    mySel.options[i].disabled=true;
}

然后，如果它是真的，请禁用它。否则，您必须启用它。如果不重新启用它，则如果用户在"sel1"中再次更改该值，则无法再次启用之前在"sel2"中禁用的值。

在 if 条件中添加两个内部 for 循环以禁用前面的值并删除 else 部分。

我已经添加了这个

   for(var j=i;j>=0;j--) {
        mySel.options[j].disabled=true;
     }
     for(j=i+1;j<mySel.options.length; j++) {
        mySel.options[j].disabled=false;
     }

在 if 条件内。

代码：

for (var i = 0; i < mySel.options.length; i++) { 
  if (mySel.options[i].value == val) {
    mySel.options[i].disabled=true;
     for(var j=i;j>=0;j--) {
        mySel.options[j].disabled=true;
     }
     for(j=i+1;j<mySel.options.length; j++) {
        mySel.options[j].disabled=false;
     }
  }    
}