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
Post a Comment