Jquery HTML5選擇下拉重新調整衝突。在同一頁上需要多個選擇下拉菜單

問候，Jquery HTML5選擇下拉重新調整衝突。在同一頁上需要多個選擇下拉菜單

我正在使用HTML5和jQuery重新設置select元素。我可以用專用於該元素的.js文件成功創建一個下拉列表，但我需要有關使用此元素的多個實例填充頁面的幫助。

select元素可以概括爲這樣：

<form> 
<select name="fancySelect" class="makeMeFancy"> 
<option value="0" selected="selected" data-skip="1">Choose Your Location</option> 
<option value="1" data-html-text="United States">United States</option> 
</select> 
</form>

JS的更復雜，試圖隱藏選擇元素和更換。簡述：

var select = $('select.makeMeFancy'); 
var selectBoxContainer = $('<div>',{ 
    width  : select.outerWidth(), 
    className : 'tzSelect', 
    html  : '<div class="selectBox"></div>' 
}); 

var dropDown = $('<ul>',{className:'dropDown'}); 
var selectBox = selectBoxContainer.find('.selectBox');

然後它這個元素進一步下跌的腳本創建CSS樣式。

我的問題是如何維護這一個JavaScript文件的多個選擇元素。是否有可能有一個主要變量和多選擇的類別名稱，即

var select =$('select.makeMeFancy'); 
var selectBoxContainer = $('<div>',{ 
width : select.outerWidth(), 
className : 'tzSelect','tzSelectb','tzSelectc' 
html  : '<div class="selectBox"></div>'

HTML示例，請訪問：select restyling example更新：解決

我有3個要素內聯，正如你可以看到它拉碼進入最後一個選擇元素並將它們完全分組。

對不起，我認爲這應該是一切。

原下拉用Turtorial雜誌超過在TutorialZine "Making better select elements"

來源

2011-03-22 nutnics

解決，插頭是在網站上提供。 – nutnics 2011-03-22 21:53:15

他們實際上已將其轉換爲其網站上的插件。見here。沒有必要重新發明輪子。

編輯
按照教程：

您可以通過簡單丟棄tzselect按照順序文件夾（可以從下載按鈕上方）到項目的根使用這個插件，並包括jquery.tzSelect.css和 jquery.tzSelect.js在您的HTML 文檔中。

示例代碼（從教程）

$(document).ready(function(){ 

    $('select.makeMeFancy').tzSelect({ 
     render : function(option){ 
      return $('<li>',{ 
       html: '<img src="'+option.data('icon')+'" /><span>'+ 
         option.data('html-text')+'</span>' 
      }); 
     }, 
     className : 'hasDetails' 
    }); 

    // Calling the default version of the dropdown 
    $('select.regularSelect').tzSelect(); 

});

來源

2011-03-22 20:24:22

不錯，我應該找他們的插件。我會更新我的下拉列表，並與結果作出迴應 – nutnics 2011-03-22 21:25:22

工作就像一個魅力，再次感謝頭像 – nutnics 2011-03-22 21:52:59

@nutnics：沒問題。 :) – 2011-03-22 23:00:00

創建首先，教程雜誌代碼沒有編碼以支持多個元素。最好的解決方案是創建一個支持多元素的jQuery插件，但這大大拓寬了這個答案的範圍。

我建議包裝他們的代碼（除。就緒（））轉換成帶參數的函數：選擇的選擇，並在下拉菜單的選擇：

function createHTMLSelect(selectSel, menuSel) { 
    // declare this instead 
    var select = $(selectSel); 

    ... 

    // also this 
    var dropDown = $('<ul>',{className:menuSel}); 
}

你再打電話給你的每個函數選擇你的網頁上：

$(document).ready(function(){ 

// first select 
createHTMLSelect('select.makeFancy', 'dropDown'); 

// second select 
createHTMLSelect('select.makeMoreFancy', 'otherDropDown'); 

... 

});

你必須有不同的類名稱爲每個選擇給這個代碼寫的方式/下拉菜單組合。

我還沒有測試過，所以可能會有一些其他的調整來讓它工作。

來源

2011-03-22 20:04:48 typeof

Jquery HTML5選擇下拉重新調整衝突。在同一頁上需要多個選擇下拉菜單

回答

相關問題