javascript - How to prevent same selected values in multiple drop down lists in a table & POST to server -
example: imagine table of babies, with each row users selects baby genderdropdown, selects name. need prevent duplicate name selection across table, if user select male & john, cannot select again in row. except babies, table has rows contain projects, , billcodes dropdowns. if disable select option in dropdown, not post server!
$('.timecodeddlid').find('option[value=' + $(this).val() + ']').prop('disabled', true); works but disabled not post selected value server
question: how can prevent duplicate selection in second dropdown? while found answers on here. however, fail - , dont posting server**. $('.timecodeddlid').find('option[value=' + $(this).val() + ']').prop('disabled', true); not post server side.
rendered html snippet table, dropdown rows
<tbody id="ts"> <tr class="rowcss"> //row 1 <td> <span class="project"> <select class="form-control projectcodeid" id="records_0__selectedprojectfromlist" name="records[0].selectedprojectfromlist"> <option value="">modeling</option> <option value="1">ventosanzap</option> <option value="2">modeling</option> </select> </span> </td> <td> <input type="hidden" name="records.index" value="0"> <span class="billingcodecss"> <select class="form-control timecodeddlid" id="records_0__selectedbillingcodesfromlist" name="records[0].selectedbillingcodesfromlist"> <option value="">budget-070</option> <option selected="selected" value="5">budget-070 </option> <option value="6">budget-784 </option> </select> </span> </td> </tr> <tr class="rowcss"> //row 2 <td> <span class="project"> <select class="form-control projectcodeid" id="records_0__selectedprojectfromlist" name="records[0].selectedprojectfromlist"> <option value="">modeling</option> <option value="1">ventosanzap</option> <option value="2">modeling</option> </select> </span> </td> <td> <input type="hidden" name="records.index" value="0"> <span class="billingcodecss"> <select class="form-control timecodeddlid" id="records_0__selectedbillingcodesfromlist" name="records[0].selectedbillingcodesfromlist"> <option value="">budget-070</option> <option selected="selected" value="5">budget-070 </option> // how prevent duplicate , still post server <option value="6">budget-784 </option> </select> </span> </td> </tr> // </tbody> javascript onchange prevent duplicate selections
//disable other previous/next selected timecodes on change $('#ts').on('change', '.timecodeddlid', function () { //baby name check //is correct dropdown selecting why not $this? var allselectedbillingcodedropdown = $('#ts .timecodeddlid option:selected'); var thisbillingselecteddropdown = $(this); var currentselectbillingcode = $(this).val(); // exisiting vlaue seelections $.each(allselectedbillingcodedropdown, function (index, item) { if ($(item).val() == currentselectbillingcode) { debugger; // remove selection //selectedbillingcodedropdown.find('option[value=' + currentselectbillingcode + ']').remove(); thisbillingselecteddropdown.find('option[value=' + currentselectbillingcode + ']').remove(); //alert userd alert('billing code cannot same'); return false; } // $('#select_id').find('option[value=' + foo + ']').remove(); //item.remove }); 
you can try way $(document).ready(function() { $("select").on('hover', function () { $previousvalue = $(this).val(); }).change(function() { $("select").not(this).find("option[value='"+ $(this).val() + "']").attr('disabled', true); $("select").not(this).find("option[value='"+ $previousvalue + "']").attr('disabled', false); }); }); $("#confirm-form").submit(function(e) { e.preventdefault(); $("select").find("option").removeattr('disabled'); document.getelementbyid('confirm-form').submit(); });
Comments
Post a Comment