javascript - Php: Change in list values dynamically without page load -


i have 3 list in form having same option while loading form.

but requirement : user selects first option should removed second list , user gives second option should removed third list. there no chances have duplicate choice.

<html> <head> <script language="javascript"> function enable_text(status) { status=!status;      document.f1.other_text.disabled = status; } </script> </head> <body onload=enable_text(false);>  <form name=f1 method=post>     <label>first pref :  </label>     <select name="colors option 1">     <option value="">select 1st</option>     <option value="r">red</option>     <option value="g">green</option>     <option value="b">blue</option>     <option value="b">yellow</option> </select> </br></br> <label>second pref : </label> <select name="colors option 2">     <option value="">select 2nd</option>     <option value="r">red</option>     <option value="g">green</option>     <option value="b">blue</option>     <option value="b">yellow</option> </select> </br></br> <label>third pref :  </label> <select name="colors option 3">     <option value="">select 3rd</option>     <option value="r">red</option>     <option value="g">green</option>     <option value="b">blue</option>     <option value="b">yellow</option> </select> 

here's jquery event change on select boxes, disable selected option in other selects not in selected one.

var selected = $(this).val(); $('select').not(this).find('option[value="'+selected+'"]').prop('disabled', true); 

and after restart options disabled not selected.

--i've seted value "y" yellow.

$(function(){    $('select').on('change', function(){                var selected = $(this).val();        $('select').not(this).find('option[value="'+selected+'"]').prop('disabled', true);                // restart options disabled, not selected anymore.        var selectedelements = "";        $('select option:selected').each(function(k,v){             selectedelements += (selectedelements!=""?",":"")+ '[value="'+$(this).val()+'"]';          });        $('select option:disabled').not(selectedelements).prop('disabled', false);    });  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <html>  <head>  </head>  <form name=f1 method=post>      <label>first pref :  </label>      <select name="colors option 1">      <option value="">select 1st</option>      <option value="r">red</option>      <option value="g">green</option>      <option value="b">blue</option>      <option value="y">yellow</option>  </select>  </br></br>  <label>second pref : </label>  <select name="colors option 2">      <option value="">select 2nd</option>      <option value="r">red</option>      <option value="g">green</option>      <option value="b">blue</option>      <option value="y">yellow</option>  </select>  </br></br>  <label>third pref :  </label>  <select name="colors option 3">      <option value="">select 3rd</option>      <option value="r">red</option>      <option value="g">green</option>      <option value="b">blue</option>      <option value="y">yellow</option>  </select>


Comments

Popular posts from this blog

python - How to insert QWidgets in the middle of a Layout? -

python - serve multiple gunicorn django instances under nginx ubuntu -

module - Prestashop displayPaymentReturn hook url -