根据所选选项更改同一下拉菜单中的选项

Question

如您所见，第一个选项（选项1）默认为选中状态。我想要做的是，如果我选择选项2，则更改它们的位置（将选项1添加到列表中并设置选中的选项2）。

<select id="type" name="type" class="selectpicker" title="Option 1" value="1">
    <option>Option 2</option>
    <option>Option 3</option>
</select>

My try:

$('.selectpicker').change(function() {
     var currentOptionValue = $('select option:selected').text();

     if (currentOptionValue == 'Option 2') {
         $(".selectpicker option[value="Option 2"]").text('Option 1');
     }
});

- Faruk

---

好的，但我不想在选项（下拉菜单）中看到当前选择的选项。我该怎么做？ - Faruk

$(".selectpicker option[value="Option 2"]").text('Option 1'); /// 它不改变它们的位置，只更改视觉文本 - daremachine

请问您能否更新您的问题，说明您真正想要什么？ - daremachine

看一下这个 JSFiddle，你需要吗？ - Pedram

https://jsfiddle.net/jnwrc5ay/52/ - Zakaria Acharki

@ZakariaAcharki，你能将这个作为回答添加吗？这很棒！干得好，非常感谢。 - Faruk

Answer 1

这是可运行的示例。

我认为这就是你要找的：

$('.selectpicker').change(function() {
     var oldOptionText  = $('.selectpicker').attr('title');
     var oldOptionValue = $('.selectpicker').attr('value');

     var currentOptionText  = $('select option:selected').text();
     var currentOptionValue = $('select option:selected').attr('value');

     $('select option:selected').text(oldOptionText);
     $('select option:selected').attr('value', oldOptionValue);

     $('.selectpicker').attr('title', currentOptionText);
     $('.selectpicker').attr('value', currentOptionValue);
});

希望这能有所帮助。

- Zakaria Acharki

---

有趣。但是似乎无法选择顶部选项？（例如，如果选择了选项1，并且选项2是选择框中的顶部选项，则只能选择选项3） - AntonChanning

是的，我看到了，我会尝试修复它。 - Zakaria Acharki

Answer 2

我认为你在寻找类似于这样的东西？

   $('.selectpicker').change(function() {
     var currentOptionValue = $('select option:selected').text();

     if (currentOptionValue == 'Option 2') {
      $(".selectpicker").append(("<option>Option 1</option>"));

     }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="type" name="type" class="selectpicker" title="Option 1" value="1">
    <option>Option 3</option>
    <option>Option 2</option>
</select>

- MKAD