如何使用jQuery選擇一個<select>選項？

我試圖做到這一點，一旦下拉選項被選中，它將被從菜單中刪除，然後一旦選擇了另一個，先前刪除的選項將返回到菜單。有沒有辦法使用jQuery來做到這一點？如何使用jQuery選擇一個<select>選項？

我是jQuery和JavaScript的新手，所以我不太確定自己在做什麼，而且我所有的問題都只會進一步破壞代碼。謝謝！

以供參考，這是我的HTML看起來像：

<div class="FlightList"> 
        <select id="departureFlightsControl"> 
         <option value="default">No flight chosen</option> 
         <option value="20121113 17:37:00">November 13, 2012 (5:37pm) - $137.38</option> 
         <option value="20121119 05:11:00">November 19, 2012 (5:11am) - $121.05</option> 
         <option value="20121124 19:41:00">November 24, 2012 (7:41pm) - $182.44</option> 
         <option value="20121208 08:22:00">December 8, 2012 (8:22am) - $140.75</option>

等，有更多的選擇。一旦選擇了默認值以外的選項，它將被填充到一個「航班信息」區域，它有一個小的「X」格「按鈕」來清除它。我想讓X按鈕返回到列表。

來源

2012-12-09 user1888527

'$（本）卸下襬臂的一個（）的所有選項'如果你需要把它帶回來， detach（）可能是你正在尋找的東西。 – adeneo

只需使用'.show（）/ hide（）'在'

你可以發佈你試過的失敗嗎？ –

您可以使用此作爲基礎：

<div class="FlightList"> 
    <select id="departureFlightsControl" onchange="addToInfo(this)"> 
     <option value="default" >No flight chosen</option> 
     <option value="20121113 17:37:00">November 13, 2012 (5:37pm) - $137.38</option> 
     <option value="20121119 05:11:00">November 19, 2012 (5:11am) - $121.05</option> 
     <option value="20121124 19:41:00">November 24, 2012 (7:41pm) - $182.44</option> 
     <option value="20121208 08:22:00">December 8, 2012 (8:22am) - $140.75</option> 
    </select> 
</div> 
<div id="flightInformation">  

</div> 
<script type="text/javascript"> 
function addToInfo(element){ 
    var opt = $(element).find(":selected").remove(); 
    var span = $('<span style="margin-left:20px;" onclick="addToList(this)"> X</span>'); 
    $(span).data('option', opt); 
    var div = $('<div>'+$(opt).html()+'</div>') 
    $(div).append(span); 
    $('#flightInformation').append(div); 
} 

function addToList(element){ 
    $('#departureFlightsControl').append($(element).data('option')); 
    $(element).closest('div').remove(); 
} 
</script>

來源

2012-12-09 00:58:53

在jQuery中創建html，使用內聯css和intrusive js事件：這些做法應該全部**避免。 – moonwave99

這裏有一個合理的解決方案，保持它的簡單，沒有工作。你可以明顯增加你想要的功能的特異性。

$(document).ready(function() { 
    var temp = 0; 
    if ($(':selected')) { 
     $('select').change(function() { 
      if (temp !== 0) { 
       temp.show(); 
      } 
      temp = $(':selected').hide(); 
      return temp; 
     }); 
    } else { 
     ('select').show(); 
    } 
});

來源

2012-12-09 01:25:05 MCM

'if（$（selector））'總是返回true。即使選擇器不存在，也會創建一個空對象。此外，任何'if'邏輯都需要位於更改處理程序中。其餘概念不能跨瀏覽器兼容，因爲IE不會隱藏'option'標籤。 – charlietfl

我想出了一種工作得很好的腳本，至少在Firefox中。 Firefox中的問題在於，在您離開控件（並且可能位於其他瀏覽器）之前，change事件不會觸發，並且在您拔出下拉菜單時發生click事件，而不僅僅是在進行選擇時發生。這使得非常難以同步，並且在選擇真正的航班之前不從列表中移除「沒有選擇的航班」項目。

所以，我在這個問題上做了一些研究，然後嘗試工作了my own jQuery plugin (jsFiddle)檢測選擇下拉和彙總。它獲得更好，但仍然無法在Firefox中正常工作。

我的結論是，雖然你可以得到這樣的動物大多工作，你可以不在身邊的幾件事情得到：

並非所有的瀏覽器實現的東西同樣的方式，讓他們「破發」不同。
在Firefox中，如果您單擊包含下拉選擇控件的iframe，則下拉列表會向上滾動，並且存在什麼也沒有您可以做出響應。因此，現在代碼會報告錯誤的事件一段時間，直到您離開控件或單擊頁面中的其他位置。
Firefox還在jQuery庫中引發腳本錯誤，但不是Chrome。
使用鍵盤快捷鍵，如Alt鍵↓彈出打開下拉別扔鼠標事件，至少在Firefox。所以你必須添加更多的鍵盤事件陷阱（你確定你會在Mac上得到這個權利嗎？Android？iPhone？）

注意：我知道我在那個小提琴中的代碼不是最優的並且有錯誤。這是一個廢棄的原型，而不是成品。:)

所以，可能我建議您改爲使用自定義選擇框，它可以做你想讓它任何東西。這裏是one example select box replacement jQuery plugin。

來源

2012-12-09 04:18:28 ErikE

這是一個緩存頁面加載時所有選項的解決方案。當選擇一個選項，選項從緩存中替換爲其值不只是選擇

var departSelect=$('#departureFlightsControl'); 
/* cache clones of all options*/ 
var departOptions=departSelect.find('option').clone(); 

departSelect.change(function(){ 
    var currVal=$(this).val(); 

    /* other display logic using currVal*/ 


    /* get new options that don't include current one selected from cache*/ 
    var newOptions= departOptions.clone().filter(function(){ 
     return $(this).val() ! = currVal; 
    }); 

    $(this).html(newOptions) 

})

來源

2012-12-09 04:52:48 charlietfl

如何使用jQuery選擇一個<select>選項？

回答

相關問題