无法从下拉列表中设置输入标签的值

debugcn 发表于 Dev

穆赫辛

我正在尝试从下拉列表中设置输入值，但它似乎对我不起作用。这是我的代码：

<form>
    <select name="color" id="color">
        <option selected value="0">white</option>  
        <option value="1">orange</option> 
        <option value="1">black</option> 
        <option value="2">yellow</option>
        <option value="2">green</option>    
        <option value="4">gray</option> 
        <option value="4">red</option> 
        <option value="8">pink</option> 
        <option value="8">blue</option> 
    </select>
    <input type="text" id="output">
</form>

$('#color').bind('change', function() {
    $('#output').html($(this).find(':selected').html() + '<br>');
    console.log($(this).find(':selected').html());
});

当我替换<input type="text" id="output">为<div id="output"></div>. 任何解决方案？

罗里·麦克罗森

该#output元素是 an input，因此您需要使用val()而非html()来设置其值。

另请注意，bind()已弃用。您应该使用change()或on('change')代替。试试这个：

$('#color').on('change', function() {
  $('#output').val($(this).find(':selected').text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select name="color" id="color">
    <option selected value="0">white</option>  
    <option value="1">orange</option> 
    <option value="1">black</option> 
    <option value="2">yellow</option>
    <option value="2">green</option>    
    <option value="4">gray</option> 
    <option value="4">red</option> 
    <option value="8">pink</option> 
    <option value="8">blue</option> 
  </select>
  <input type="text" id="output">
</form>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。