单击按钮时启用选择选项

Question

我希望能够为选择选项添加一个div并在选择下拉列表中禁用它。

我有一个删除按钮，但是

如果按下删除按钮，我想重新启用选择选项 - 这是我迄今为止无法做到的。

任何人都可以帮忙吗？

首选jQuery解决方案，但JavaScript解决方案也很好。 对隐藏/显示而不是禁用/启用等解决方案开放。

$('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>

请注意，据我所知，这不是一个重复的问题 - 它被标记为重复的问题肯定与我的问题无关，我的问题专门涉及在单击按钮时删除禁用的属性。 请不要关闭我的问题，除非您实际上找到了适当的副本(我无法通过近两个小时的搜索SO(。

Answer 1

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

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

Answer 2

我只是在这里添加了一行，所以在单击删除按钮后，具有 val 0 的选项发生了变化。你应该做的是更改你的html代码并添加val。

这是 html 代码。

<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>

这是JS代码，

$('#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();
 });