事件處理程序來選擇

一切工作正常，但我無法弄清楚如何把處理程序，它會採取從那裏值。也就是說，當您更改選擇器以更改「內容」時。這裏是選擇的代碼：

<select id="cd-dropdown" class="cd-select"> 
    <option value="-1" selected>Choose an animal</option> 
    <option value="1" class="icon-monkey">Monkey</option> 
    <option value="2" class="icon-bear">Bear</option> 
    <option value="3" class="icon-squirrel">Squirrel</option> 
    <option value="4" class="icon-elephant">Elephant</option> 
    </select>

，但在頁面上已顯示

<div class="cd-dropdown"> 
    <span>Choose an animal</span> 
    <input type="hidden" name="cd-dropdown"> 
    <ul> 
     <li data-value="1"><span class="icon-monkey">Monkey</span></li> 
     <li data-value="2"><span class="icon-bear">Bear</span></li> 
     <li data-value="3"><span class="icon-squirrel">Squirrel</span></li> 
     <li data-value="4"><span class="icon-elephant">Elephant</span></li> 
    </ul> 
    </div>

，我意識到，這「轉型」的發生

jquery.dropdown.js

創建2形式，forma1與id =「f1」，同樣form2 c id =「f2」，一種形式沒有隱藏。放在選擇

onChange="a(this.value)"

，

function a(value){ 
$('#f' + value).show() 
if (value == 1) 
    $('#f2').hide() 
else 
    $('#f1').hide() 
}

中性選擇的作品，但這不是。如果控制檯瀏覽器調用具有一定值的函數，例如： （2），全部正常輸出。

因此，像在哪裏放置事件處理程序，它檢查隱藏字段的值？

在此先感謝

來源

2012-12-19 S1ash

這個問題可能會被關閉，因爲沒有人可以真正弄清楚你的問題是什麼......嘗試澄清你的問題，添加代碼並指出你在哪裏混淆和/或顯示你的東西試過。 – Mottie

@Mottie更新 – S1ash

很高興你把這個問題。沒有答案！但我肯定喜歡這些演示中顯示的效果。很想閱讀更多關於這些內容的內容！ –

DEMO

HTML：

<select id="cd-dropdown" class="cd-select"> 
    <option value="-1" selected>Choose an animal</option> 
    <option value="1" class="icon-monkey">Monkey</option> 
    <option value="2" class="icon-bear">Bear</option> 
    <option value="3" class="icon-squirrel">Squirrel</option> 
    <option value="4" class="icon-elephant">Elephant</option> 
</select> 

<div id="div1" class="animalDiv">MONKEY</div> 
<div id="div2" class="animalDiv">BEAR</div> 
<div id="div3" class="animalDiv">SQUIRREL</div> 
<div id="div4" class="animalDiv">ELEPHANT</div>

CSS：

.animalDiv { 
display:none; 
}

個JS/jQuery的：

$(function() { 
    $('#cd-dropdown').dropdown({ 
     gutter: 5, 
     stack: false, 
     delay: 100, 
     slidingIn: 100, 
     onOptionSelect: function(e) { 
      var _counter = ($(e).html()).split('data-value="')[1].split('"')[0]; 
      $(".animalDiv").hide(); 
      $("#div" + _counter).show(); 
     } 
    }); 
});

* 注意： 我要指出，我也取得了jquery.dropdown.js變化：

val !== -1 ? classes !== undefined ? optshtml += '<li><span data-value="' + val + '" class="' + classes + '">' + label + '</span></li>' : optshtml += '<li><span data-value="' + val + '">' + label + '</span></li>' : selectlabel = label;

從li移動data-value到span

來源

2012-12-19 20:22:11 kei

我想作一個小提琴，但我沒有耐心去修改JavaScript和CSS，你只是做展示這個工作的量。榮譽和很好的例子。 –

我不確定你到底在問什麼，但是我會去刺傷它。

我假設你問的是如何添加一個處理程序來點擊其中一個「選項」。也就是說當有人點擊'猴子'時，你想用一個函數來處理這個點擊。

從看插件的來源，我看到他們已經允許選項稱爲'onOptionSelect'。我沒有看到這個選項任何解釋或文件，但它會出現，從查看源，這是Click事件處理程序：

this.opts.on('click.dropdown', function() { 
     if(self.opened) { 
      var opt = $(this); 
      self.options.onOptionSelect(opt); 
      self.inputEl.val(opt.data('value')); 
      self.selectlabel.html(opt.html()); 
      self.close(); 
     } 
    });

在這裏你可以看到，他們正在調用「 onOptionSelect'函數並傳入所選項目作爲唯一參數。所以，當你創建腳本中的下拉列表中，添加功能爲您的處理程序：

$('#cd-dropdown').dropdown({onOptionSelect: aHandler}); 

function aHandler(value){ 
$('#f' + value).show() 
if (value == 1) 
    $('#f2').hide() 
else 
    $('#f1').hide() 
}

這樣你可以寫一個處理程序，做任何你與該值要被點擊的選項時。

如果您是不是試圖找出什麼項目在「下拉菜單」選擇需要查詢的「隱藏」與「CD-下拉菜單」的名稱。這個隱藏的輸入有選定的值：

$('input[name="cd-dropdown"]').val() --> equals the selected value

我希望這是有幫助的。我認爲那個插件需要更多的文檔。

來源

2012-12-19 20:23:58

$('#cd-dropdown').dropdown({ 
      onOptionSelect: function (opt) { 
       alert(opt.data('value')); 
       return false; 
      } 
     });

來源

2014-07-01 05:41:35 Lakmal

事件處理程序來選擇

回答

相關問題