2012-11-12 77 views
0

我有一個select看起來像這樣:添加號碼範圍來選擇選項

<select id="address"> 
    <option noodd="1-9" noeven="2-6">Address Name 1</option> 
    <option noodd="3-5" noeven="2-10">Address Name 2</option> 
    <option noodd="3-11" noeven="1-5">Address Name 3</option> 
</select> 

<select id="housenumber"> 
</select> 

只要選擇在#address的選項之一,我需要#housenumber要在地址範圍內填充數選擇。所以,當選擇Address Name 1,我需要#housenumber看起來像這樣:

<select id="housenumber"> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
    <option>6</option> 
    <option>7</option> 
    <option>9</option> 
</select> 

有沒有人有一個聰明的想法如何做到這一點?

UPDATE,我需要的是這樣的:

  • 是發現在noeven每個option指定的號碼之間的所有人數相等的功能。
  • 一個函數,用於找出每個optionnoodd中指定的數字之間的所有奇數。
  • ,結合了這兩個名單,並將它們放入option元素
  • 每當#address相應option選擇
+0

'noodd'和'noeven'用來幹什麼? –

+0

這些都是在選定的街道上可用的房屋號碼。所以這是奇數和偶數的範圍。我從JSON中檢索數據,但無法更改,因此這是我獲得的唯一數據。 – pshoeg

+0

我只是不明白你如何得到你的結果html。爲什麼沒有價值8的選項? –

回答

2

像這樣的東西應該做的是附加這些option元素#housenumber功能的功能:

$('#address').change(function(){ 
    var $selected = $('option:selected',this); 
    var odd = $selected.attr('noodd').split('-'); 
    var even = $selected.attr('noeven').split('-'); 

    var arr = []; 
    for(var o = parseInt(odd[0],10);o<=parseInt(odd[1],10);o+=2){ 
     arr.push(o); 
    } 

    for(var e = parseInt(even[0],10);e<=parseInt(even[1],10);e+=2){ 
     arr.push(e); 
    } 

    var $housenumber = $('#housenumber'); 
    $housenumber.empty(); 
    $.each(arr.sort(function(a,b){return a-b;}),function(i,e){ 
     $housenumber.append($('<option/>').text(e)); 
    }); 
}); 

活生生的例子:​​

有兩點要注意:

  1. 您應該使用data-*屬性,而不是自定義的。使您的選項節點看起來像<option data-odd="1-9" data-even="2-6">Address Name 1</option>使讀取它們更安全,例如var odd = $selected.data('odd').split('-');

  2. 您的第三個元素有偶數的奇數,給出了一些奇怪的結果。假設這只是安布錯誤發佈的問題?

+0

謝謝。我也開始玩弄推,我會嘗試將我已經發現的代碼和你的代碼結合起來。謝謝,我會那樣做的。 2.是的,這是一個錯誤 – pshoeg

+0

它的工作原理!非常感謝Jamiec。 – pshoeg