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

Question

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

<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> .有什么解决办法吗？

Answer 1

#output元素是一个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>