無法從下拉列表中設置輸入標記的值

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()); 
}); 

它的工作原理，當我和<div id="output"></div>取代<input type="text" id="output">。任何解決方案

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

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

Answer 3

輸入標籤始終具有價值，所以你必須改變代碼的下方。

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

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

}); 

</script> 

Answer 4

與輸入元素應該是val()不html()

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

Answer 5

試試這個例子，

$('#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 6

試試這個：jQuery的的

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