根據列表中的選擇選項刷新下拉列表

我真的需要幫助。我是jQuery的新手，我正嘗試刷新dropdown list，或者在選擇列表中的某個選項時更改其值。根據列表中的選擇選項刷新下拉列表

HTML

<select name="State_locate" class="State"> 
    <option value=" " selected="selected">Select a state</option> 
    <option value="AL">Alabama</option> 
    <option value="AK">Alaska</option> 
</select> 
<div id="City_1" class="Alabama"> 
    <select name="City_location[]" class="CityExt"> 
     <option value="Null" selected="selected">Select a city</option> 
     <option value="Avondale">Avondale</option> 
     <option value="Buckeye">Buckeye</option> 
     <option value="Catalina">Catalina</option> 
    </select> 
</div> 
<div id="City_1" class="Alaska"> 
    <select name="City_location[]" class="CityExt"> 
     <option value="Null" selected="selected">Select a city</option> 
     <option value="Lancaster">Lancaster</option> 
     <option value="Soth">Soth</option> 
     <option value="Foothills">Foothills</option> 
    </select> 
</div>

// JavaScript Document 

$("select").bind("change", function() { 

    if ($(this).val() == "AL") { 
     $(".Alabama").slideDown(); 

     $(".Alaska").slideUp(function() { 

      if ($('.Alabama').is(':visible')) { 
       $(".Alaska option[value='Lancaster']").attr('selected', 'selected') 
      } 
     }); 
    } else if ($(this).val() == "AK") { 
     $(".Alaska").slideDown(); 
     $(".Alabama").slideUp(); 
    } 
})

時，被選擇的狀態正是我試圖做的是，那麼一個城市的下落。這是完美的。但一旦提交，該城市的價值儲存在數組City_location[]。

現在的問題是，如果用戶在提交表單之前選擇了阿拉斯加的一個城市，然後在阿拉巴馬州選擇另一個城市，那麼最終會有兩個城市在阿拉巴馬州和阿拉斯加州的陣列中。

我正在尋找一種方法來爲阿拉斯加州選擇值「空」，如果選擇阿拉巴馬州。但我的代碼不起作用。它只有在值是「Null」時纔有效。例如，如果我使用值「蘭開斯特」，在jQuery代碼

$(".Alaska option[value='Lancaster']").attr('selected', 'selected')

的這一部分它只能一次。如果我做了兩次，它不會更新。我怎麼解決這個問題。

對不起，長碼。謝謝您的幫助。

來源

2013-10-20 Adagoon

你爲什麼要將它存儲在數組中？你選擇了多個值嗎？ –

我將它存儲在數組中，因爲如果我不這樣做，當我提交我的表單時，我無法檢索城市，因爲選擇具有相同的名稱。這只是一個示例代碼，我正在爲所有50個州做這件事。如果我有他們不同的名字，那麼我的代碼會更長。 – Adagoon

你可以做這樣的事情：

$('.state').on('change',function() { 
    $('.CityExt').val(''); 
}

然後，每當狀態選擇發生變化時，它會設置這兩個城市的價值選擇不了了之。

來源

2013-10-20 04:59:10 NicholasJohn16

我試過你的建議，但沒有任何成功。我用了一些你的想法以及上面的想法來提出這個代碼。 if（$（this）.val（）==「AL」）{（「。Alabama」）。滑下（）; \t \t \t $（」阿拉斯加。「）效果基本show（函數（）{ 如果（$（」亞拉巴馬：可見的「）長度）{ $（」阿拉斯加選項[值= 'Anchoragege'] 「）.attr（'selected'，'selected'）; \t} }）; – Adagoon

試試這個：

$(".Alaska option:eq(0)").attr('selected', 'selected')

由於空元素是這將解決您的問題第一個。

來源

2013-10-20 05:04:12

感謝您的及時迴應。我嘗試了你的建議，沒有發生任何事情。 – Adagoon

我覺得上面的解決方案就是你要找的東西。當你選擇'.Alabama'時，它會選擇類'.alaska'的'null'值。 –

我發現我的問題。除了使用「託」的我用「ATTR」

$(".Alaska option[value='Lancaster']").prop('selected', 'selected');

現在，當其他城市正在提交兩次以上之前選擇每一次，代碼不會只工作一次。

我查了一下意思，但還是不太明白，爲什麼在jquery中用「prop」代替「attr」。我會繼續搜索。感謝所有回覆我的人的幫助。

來源

2013-10-20 19:34:58 Adagoon

這是因爲你正在使用jquery 1.6+，並且在這裏介紹了prop，在http://api.jquery.com/prop/上有更多關於prop的內容。 –

根據列表中的選擇選項刷新下拉列表

回答

相關問題