Disable select options

Question

I have 2 select boxes. What I need to do is: when the 1st select option I chosen to enable 2nd select options and then when I chose option,it ads it self to a ol li list and disables that option. When I click on li the li should disappear and option on second select box should be enabled.

<div class="styleSelect"> <select class="units" id="select"> <option value="1">Sve ponude</option> <option value="2">1</option> <option value="3">2</option> </select> </div> <div class="styleSelect"> <select class="units" id="change"> <option value="1" disabled="disabled" selected="selected">Sve ponude</option> <option value="2">1</option> <option value="3">2</option> </select> </div> <div> <ol> </ol> </div>

jquery:

 function getText(){ $('#change').on('change',function(){ $(".value_change").prop('value', 'Potvrdi'); $("#close").css('display', 'none'); conceptName ='<li>' + $('#change').find(":selected").text() + ' ( ' + $('#select').find(":selected").text() + ' ) <a class="speclist-remove"></a></li>'; $('ol').append(conceptName); $('#change').on('change',function(){ if($(this).val()){ $(this).prop("disabled",true); } }); $(".speclist-remove").on("click", function(){ $(this).closest("li").remove(); alert($(this).closest("li").text()); }); }); }

Have you tried something? SO isn't here to write the code for you :) Please include your attempts in the question :) — Epodax
– Epodax, Commented Sep 3, 2015 at 8:10

Norlihazmey Ghazali · Accepted Answer · 2015-09-03 08:31:10Z

Not quite sure correct or not, try this example usage :

HTML

<div class="styleSelect"> <select class="units" id="select"> <option value="1">Sve ponude</option> <option value="2">1</option> <option value="3">2</option> </select> </div> <div class="styleSelect"> <select class="units" id="change"> <option value="1" disabled="disabled" selected="selected">Sve ponude</option> <option value="2">1</option> <option value="3">2</option> </select> </div> <div> <ol></ol> </div>

JS

$(document).on('change', '#select', function(){ var val = $(this).val(); $('ol').append('<li>'+val+'</li>'); $('#change option[value="'+val+'"]').prop('disabled', true); }); $(document).on('click','ol li',function(){ var val = $(this).text().trim(); $(this).remove(); $('#change option[value="'+val+'"]').prop('disabled', false); });

DEMO

close but not correct. when 2nd option is chosen it should ad to ol and only 2nd select options should be disabled,1st select options is enabled.
that is it. thanks. :D Well 2 more things. can it show text and not value and show text of both selected options?
i need when 1st select option is clicked and 2nd select option is clicked to put both text in li. and when 1st select option is changed to be able to add more options of 2nd select. Kinda complicated :/
Check demo link. Answer updated for text output instead value. But for last requirement did't get it what you want to achieve.

Collectives™ on Stack Overflow

Disable select options

1 Answer 1

9 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Related