从一个选择标记中选择一个值后禁用选择值[关闭]

i have two select option for time selecting if i would select one value say 9:00am from one select tag 9:00am should be disabled from other select tag code is

<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..

These are the two select tag ..

Thanks in Advance,

Ameeth

i think this may be what you're looking for

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 Code :

<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;
    }
  } 
}

You have to find the option in the other select using the value of the current select :

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

Then if it is true, disable it. or else, you have to enable it. If you do not enable it back, then if user changes the value again in "sel1", the value that is previously disabled in "sel2" can not be enabled again.

Add two inner for loops inside the if condition to disable the previous values and delete the else part.

I have added this

   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;
     }

inside the if condition.

the code :

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;
     }

  }    
}