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>

Answer 2

试试这个例子，

$('#color').bind('change', function() {
    $('#output').val($('#color option: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>

我已经对您选择的选项文字进行了更改。

我希望这会有所帮助。

Answer 3

试试这个：

$(document).ready(function() {
  $('#color').on('change', function() {
    //alert( this.value );
     $('#output').val(this.value);
  });
});

Answer 4

<script type="text/javascript">
$('#color').bind('change', function(){
    $('#output').val($(this).find(':selected').html() + '<br>');
    console.log($(this).find(':selected').html());
});

Answer 5

输入标记总是有值，因此您必须将代码更改为以下。

<script type="text/javascript">
$(document).on('change','#color', function(){

    $('#output').val($(this).find(':selected').html() + '<br>');

});

</script>

Answer 6

使用输入元素时，val()不应为html()

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

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

6 个答案: