多选下拉列表值移动到文本框

Question

我正在使用此 javascript 代码将字段值复制到另一个字段。当我们喜欢在下拉列表中使用复选框时，我们必须单击一个复选框，然后将值复制到一个文本框中。

但它在文本框中只选择单个而不是多个值...

<script>
    $(document).ready(function() {
        $("#dropdown").on('change',function(){
            var dropdownVal=this.value;

            $("#textbox").val(dropdownVal); 
        });
    });
</script>

<form>
    <p>
        <select multiple="multiple" name="dropdown"  id="dropdown" style="width:370px">
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
            <option value="orange">Orange</option>
        </select>
    </p>

    <input type="text" class="normal" id="textbox" name="textbox"  style="width:450px;"></td>
</form>

<script type="text/javascript">
    $("select").multiselect().multiselectfilter();
</script>

我正在使用带有复选框的多选下拉列表。

Answer 1

this.value; 应该是 $(this).val(); 如果您使用的是 Jquery。你需要click 事件而不是change 事件。看到这个工作版本：http://jsfiddle.net/5Q552/1/

和信息一样：而不是$(document).ready(function(){});
你也可以使用：$(function(){});

$(function() {
  $("#dropdown").on('click',function(){
    var dropdownVal=$(this).val();
    $("#textbox").val(dropdownVal);         
  });
});

<form>
 <p>
 <select multiple="multiple" name="dropdown"  id="dropdown" style="width:370px">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
  <option value="orange">Orange</option>        
 </select>
 </p>
 <input type="text" class="normal" id="textbox" name="textbox" style="width:450px;"></td>
</form>