jquery - 从 div 中获取数字并使用相同数量的选项填充选择下拉列表

Question

我正在尝试使用与单独 div 中的数字相同数量的选项填充选择下拉列表。

例如，如果一个 div 的值为“3”，我需要用 3 个选项填充选择下拉列表......例如：

<select name="quantity">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

如果 div 中的数字更改为 6 - 那么它将使用 6 个选项填充选择。

非常感谢任何帮助！谢谢。

Answer 1

这是你想要的吗？

http://jsfiddle.net/Sgqjg/

html是：

<div id="changeMe">9</div>

<select name="quantity" id="populateMe">
</select>

脚本是：

var num = parseInt($("#changeMe").text());
var opt = '';
for(i=1;i<=num;i++){
     opt +=  "<option value='" + i + "'>" + i + "</option>";
}
$("#populateMe").html(opt);

编辑：在每个循环中附加并转换为 int div 的文本值会减慢进程。

Answer 2

每当您的 div 更改时调用此代码。假设您的 div 的 id 是 'otherDiv' 并且您的下拉列表的 id 是 'yourSelect'

var count = parseInt ( $("#otherDiv").html() );

var options = "";
for (var x = 1; x<= count; x++)
{ 
   options += "<option>" + x + "</option>";
}

$("#yourSelect").htmml(options);

（这需要jquery）

Answer 3

JS：

var $sel = $("select");

$("input").keyup(function () {
    $sel.empty();
    var howMany = parseInt($(this).val(), 10);
    for (var i = 1; i <= howMany; i++) {
        $sel.append("<option value='" + i + "'>" + i + "</option>");
    }
});​

高度抛光的布局：

<select></select>
<input />
​​​​​​​​​​​​​​​​​​​​​​

演示。