在輸入變更時生成選項選擇

<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>

上面的代碼是爲選擇生成一些選項。在輸入變更時生成選項選擇

我想要做的是，如果#gameid中的val被更改，選項列表也會改變，對於#netid也是如此。

但是，該選項不會更改。它保持在#gameid和#netid的默認值。

我不知道我在這裏失蹤。我需要幫助。

[UPDATE]

此代碼幾乎工作。但是，當我在選擇完所有的#cameid後再進行第二次更改時，它不再更改#campid選擇。如果我在#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>"); 
    } 
});

來源

2015-04-23 iyal

什麼是遊戲ID和網絡標識符號，它們是輸入或選擇框？請分享一些相關的html代碼 –

他們也是選擇選項。 – iyal

你是什麼意思，@iyal？ – Vikrant

使用更改事件

$('#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>"); 
    } 
});

注：我用jQuery的，的jsfiddle：https://jsfiddle.net/1zgre9pw/4/

來源

2015-04-23 05:19:02 madalinivascu

第一行有錯誤，那是什麼？ – iyal

它可以改變數值，但是它只打印選項值，我的所有html代碼都不見了？ – iyal

已更新我的代碼 – madalinivascu

使用這樣的事情：

var options = ''; 
for (var i = 1; i<=999; i++) 
{ 
    options += "<option value='"+c+i+"'>"+c+i+"</option>"; 
} 
document.getElementById('camp_id').innerHTML = options;

使用類似於插入選項，其他選擇如果需要的話盒子

來源

2015-04-23 05:19:24

正如您想動態添加選項到HTML select。我試圖用jquery來實現，即致電$('#gameid').populate();。

首先，加入jQuery庫在頁面<head>：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>`

WORKING DEMO

$.fn.populate = function() { 
    var $this = $(this); 

    for (var i = 1; i<=999; i++){ 
     $this.append("<option value='"+(c+i)+"'>"+(c+i)+"</option>"); 
    } 
}  
$('#gameid').populate();

您可以添加同爲第二select（下拉）爲好。

來源

2015-04-23 05:19:27 Vikrant

@iyal，是否適合您？ – Vikrant

不要忘記添加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>

來源

2015-04-23 05:25:27

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/

來源

2015-04-23 05:31:42 partypete25

這一個幾乎達到我想要的。但是，它在更改時不會更改/添加'var b'的值。 – iyal

看我的更新代碼，我修改你的。 – iyal

添加netid到變化功能 https://jsfiddle.net/partypete25/j9toh39c/2/ – partypete25

在輸入變更時生成選項選擇

回答

相關問題