单击按钮启用 Select 选项

Question

I want to be able to add a div for the select option and disable it within the select dropdown.

This I have working, with a delete button, however I want to re-enable the select option if the delete button is pressed - this is what I have so far been unable to do.

Can anyone kindly assist?

jQuery solution preferred but JavaScript solution also good. Open to solutions such as hide/show instead of disable/enable.

 $('select').on('change', function(e) { $('#here').append('<div>' + $(this).val() + '<button>DELETE</button> </div>'); $('option:selected', this).attr('disabled', true); }); $("div").on("click", "button", function(e) { e.preventDefault(); var value = $(this).val(); $('select').find($('option:selected', this)).attr('disabled', false); $(this).parent().remove(); });

 div { border: 1px solid #999; padding: 15px }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select> <option>Please select one</option> <option>Volvooooo</option> <option>Saaaaaab</option> <option>Mercedeeeeeeees</option> <option>Audiiiiiii</option> </select> <div id="here">Nothing selected yet</div>

Note that as far as I am aware, this is not a duplicate question - and the question that it has been marked as a duplicate of most certainly does not relate to my question, which is specifically about removing disabled property on button click. Please do not close my question unless you actually find a proper duplicate (which I couldn't with nearly two hours of searching SO).

Answer 1

将布尔值更改为false而不是true。

  $('option:selected', this).attr('disabled', false); 

Answer 2

I Just added a line here so after clicking delete button, option having val 0 got change. What you should do is to change your html code and add val.

Here is the html code.

<select id="mySelect">
    <option value="0" disabled selected>Please select one</option>
    <option value="1">Volvooooo</option>
    <option value="2">Saaaaaab</option>
    <option value="3">Mercedeeeeeeees</option>
    <option value="4">Audiiiiiii</option>
  </select>

<div id="here">Nothing selected yet</div>

And here is the JS code,

$('#mySelect').on('change', function (e){
   if($('#mySelect>option:selected').val() != "0"){
     $('#here').append('<div>' + $('#mySelect>option:selected').text() + '<button class="deleteButton" value="' + $(this).val() + '">DELETE</button> </div>');
     $('#mySelect>option:selected').attr('disabled', true);
   }    
 });  
 
 $("div").on("click", ".deleteButton", function(e) {
   e.preventDefault();
   $('#mySelect').val('0').trigger('change');
   $('#mySelect>option[value=' + $(this).val() + ']').attr('disabled', false);
   $(this).parent().remove();
 });