javascript - 在 javascript 中选择操作

Question

我有以下问题:

1) 我有包含一些汽车名称的 DropDown1。

2) 我的 DropDown2 有两个值:

在 DropDown2 中，选择每个值时应发生以下情况:

a) 在选择 UserInput 时，左侧的多选框应该被隐藏，并且在同一个地方，应该出现一个文本框。用户可以在文本框中写入任何汽车名称，然后使用从左到右的按钮将该值移动到右侧选择框。在这种情况下，应禁用从右到左的按钮。

b) 选择 AutoPopulate 时，多选框应出现在左侧与文本框相同的位置，文本框应被隐藏。多选框应使用 DropDown1 中的汽车列表进行填充。用户应该能够从左到右和从右到左选择和移动汽车。

我是 Javascript 新手。有人可以帮我解决这个问题吗？

JSFiddle

$(function(){
    $("#button1").click(function(){
        $("#list1 > option:selected").each(function(){
            $(this).remove().appendTo("#list2");
        });
    });
    
    $("#button2").click(function(){
        $("#list2 > option:selected").each(function(){
            $(this).remove().appendTo("#list1");
        });
    });
});

 .bloc { display:inline-block; vertical-align:top; overflow:hidden; border:solid grey 1px; width:100px;}
 .bloc select { padding:10px; margin:-5px -20px -5px -5px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
DropDown1:
<select id="DropDown1" name="DropDown1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<br><br>
DropDown2:
<select id="DropDown2" name="DropDown2">
  <option value="">-- Select --</option>
  <option value="oneUsrInput">User Input</option>
  <option value="twoAutoPopulate">Auto Populate</option>
</select>
<br><br>
<input type="text" id="TextBoxId" name="TextBoxId">
<div class="bloc">     
    <select id="list1" multiple="multiple" rows=2>
        <option value=1>Option 1</option>
        <option value=2>Option 2</option>
        <option value=3>Option 3</option>
        <option value=4>Option 4</option>
        <option value=5>Option 5</option>
        <option value=6>Option 6</option>
    </select>
   </div>
 <div style="display:inline-block;">
    <input id="button1" type="button" value=">>" />
    <br/>
    <input id="button2" type="button" value="<<" />
 </div>
<div class="bloc">
    <select id="list2" multiple="multiple" rows=2>        
    </select>   
</div>

Answer 1

更精确的代码:

$(function() {
  var value = 100;
  $("#button1").click(function() {
    if ($("#DropDown2").val() == "oneUsrInput") {
      console.log();
      $("<option value=" + (value++) + ">" + $("#TextBoxId").val() + "</option>").appendTo("#list2");
    } else if ($("#DropDown2").val() == "twoAutoPopulate") {
      $("#list1 > option:selected").each(function() {
        $(this).remove().appendTo("#list2");
      });
    }
  });

  $("#button2").click(function() {
    $("#list2 > option:selected").each(function() {
      $(this).remove().appendTo("#list1");
    });
  });
  $("#DropDown2").on('change', function() {
    if ($("#DropDown2").val() == "oneUsrInput") {
      $("#TextBoxId").show();
      $("#list1").parent().hide();
    } else if ($("#DropDown2").val() == "twoAutoPopulate") {
      $("#TextBoxId").hide();
      $("#list1").parent().show();
    }
  })
});

您需要更多帮助吗？或者你可以继续吗？

JSFIDDLE