在输入更改时生成选项选择
[英]Generate option select on input change
问题描述
<select id="gameid">
//<option is a number 1-999>
</select>
<select id="netid">
//<option is a number 1-999>
</select>
<select id="camp_id">
<script>
var a = $("#gameid").val();
var b = $("#netid").val();
var c = a+b;
for (var i = 1; i<=999; i++)
{
document.write("<option value='"+c+i+"'>"+c+i+"</option>");
}
</script>
</select>
The code above is to generate some options into selection. 
上面的代码将生成一些选择选项。
What I want to do there is, if the val in the #gameid is changed, the option list will change too, and so does for the #netid. 我想做的是，如果#gameid中的val改变了，选项列表也将改变，＃netid也是如此。
However, the option doesn't change. 但是，该选项不会更改。 It stay in the default value of the #gameid and #netid. 它保留在#gameid和#netid的默认值中。
I don't know what I am missing here. 我不知道我在这里想念的是什么。 I need a help, please. 请帮忙。
[UPDATE] [更新]
This code almost work. 此代码几乎可以正常工作。 However, when I do the second change on the #cameid after all I have been select, it doesn't change the #campid selection anymore. 但是，当我在全部选中之后对#cameid进行第二次更改时，它不再更改#campid选择。 It will do change it again if I do the change too on the #netid. 如果我也对#netid进行更改，它将再次更改它。
$("#gameid" && "#netid").on('change', function(){
a = $("#gameid").val(),
b = $("#netid").val(),
c = a+b;
$("#camp_id").empty();
for (var i = 1; i<=999; i++){
$("#camp_id").append("<option value='"+(c+i)+"'>"+(c+i)+"</option>");
}
});
5 个解决方案
解决方案1
2 2015-04-23 05:19:02
Use change event 使用变更事件
$('#gameid,#netid').on('change',function (){
var a = $("#gameid").val();
var b = $("#netid").val();
alert($(this).attr('id'));
var c = parseInt(a)+parseInt(b);
if ( $(this).attr('id') == 'gameid') {
$el = $("#netid");} else {$el = $("#gameid")};
$el.text('');
for (var i = 1; i<=999; i++)
{
$el.append("<option value='"+(c+i)+"'>"+(c+i)+"</option>");
}
});
note: I used jquery, jsfiddle: https://jsfiddle.net/1zgre9pw/4/ 注意：我使用了jQuery，jsfiddle： https ://jsfiddle.net/1zgre9pw/4/
解决方案2
2 2015-04-23 05:19:24
Use something like this: 使用这样的东西：
var options = '';
for (var i = 1; i<=999; i++)
{
options += "<option value='"+c+i+"'>"+c+i+"</option>";
}
document.getElementById('camp_id').innerHTML = options;
Use similar to insert options to other select boxes if needed 如果需要，可以使用类似的选项将选项插入其他选择框
解决方案3
2 2015-04-23 05:25:27
Don't forget to add Jquery library, 不要忘记添加Jquery库，
<select id="gameid" onchange="generateOptions();">
<!-- Your Options -->
</select>
<select id="netid" onchange="generateOptions();">
<!-- Your Options -->
</select>
<select id="camp_id">
</select>
<script type="text/javascript">
var a,b,c,str="";
function generateOptions()
{
a = $("#gameid").val();
b = $("#netid").val();
c = a+b;
for (var i = 1; i<=999; i++)
{
str= str + "<option value='"+c+i+"'>"+c+i+"</option>";
}
$('#camp_id').html(str);
}
</script>
解决方案4
2 2015-04-23 05:31:42
var a = $("#gameid").val(),
b = $("#netid").val(),
c;
$("#gameid").change(function(){
a = $(this).val();
c = parseInt(a)+parseInt(b);
$("#camp_id").empty();
for (var i = 1; i<=999; i++){
$("#camp_id").append("<option value='"+(c+i)+"'>"+(c+i)+"</option>");
}
});
https://jsfiddle.net/partypete25/j9toh39c/ https://jsfiddle.net/partypete25/j9toh39c/
解决方案5
1 2015-04-23 05:19:27
As you want to add options to HTML select dynamically. 如要向HTML添加选项，请动态select 。 I have tried to achieve the same using jquery ie to be call on $('#gameid').populate(); 我试图使用jquery实现相同的功能，即在$('#gameid').populate();上调用$('#gameid').populate(); . 。
Firstly, Add jquery library in <head> of page: 首先，在页面的<head>中添加jquery库：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>`
$.fn.populate = function () {
var $this = $(this);
for (var i = 1; i<=999; i++){
$this.append("<option value='"+(c+i)+"'>"+(c+i)+"</option>");
}
}
$('#gameid').populate();
You can add same for second select (drop-down) as well. 您也可以为第二select （下拉）添加相同的内容。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.