MultiSelect下拉列表值移至文本框

时间:2014-04-06 12:54:18

标签: javascript jquery

我正在使用此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>

我正在使用多个选择下拉列表和复选框。

1 个答案:

答案 0 :(得分:1)

如果您使用的是Jquery,则

this.value;应为$(this).val();。并且您需要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>