如何在JavaScript中重新填充下拉字段

How to re populate drop-down field in JavaScript?

本文关键字：填充 字段 新填充 JavaScript      更新时间：2023-09-26

请仔细检查我的代码:

JavaScript 

var myColor = 'blue'; //This is dynamic
var str1 = 'Color: <select name="chat_color" id="chat_color"><option value="red">Red</option><option value="green">Green</option><option value="blue">Blue</option><option value="yellow">Yellow</option></select>'n'
'n'
 <input type="submit" class="loginbox-btn" value=" Save Color ">';
$('#example').html(str1);

上面的JavaScript代码，我的颜色目前是blue，所以我想在examplediv id中显示html，并在下拉选项中选择Blue颜色。

谢谢

你可以使用。val()来选择元素:

var myColor = 'blue'; //This is dynamic
var str1 = 'Color: <select name="chat_color" id="chat_color"><option value="red">Red</option><option value="green">Green</option><option value="blue">Blue</option><option value="yellow">Yellow</option></select>'n'
'n'
 <input type="submit" class="loginbox-btn" value=" Save Color ">';
$('#example').html(str1).find('#chat_color').val(myColor);
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<div id="example"></div>

您可以检查颜色并设置HTML属性selected="selected"

    var myColor = 'blue'; //This is dynamic
    var str1 = 'Color: <select name="chat_color" id="chat_color"><option value="red"'+(myColor == 'red'?' selected="selected"':'')+'>Red</option><option value="green"'+(myColor == 'green'?' selected="selected"':'')+'>Green</option><option value="blue"'+(myColor == 'blue'?' selected="selected"':'')+'>Blue</option><option value="yellow"'+(myColor == 'yellow'?' selected="selected"':'')+'>Yellow</option></select><input type="submit" class="loginbox-btn" value=" Save Color ">';
    $('#example').html(str1);

试试这个:

 ......//Rest of your code
 $('#example').html(str1);
 $('#chat_color').val(myColor); //Value of select is myColor

小提琴。

您可以找到合适的元素，并使其被选中，如下所示:

$("input[value=" + myColor + "]").prop("selected", "selected");

您可以使用.val( value ) 设置匹配元素集合中每个元素的值

所以你所需要做的就是在你把它添加到<div id='example'></div>

之后找到下拉框
$('#example').html(str1);
$("#chat_color").val(myColor);

小提琴

相关文章：