Các xử lý sự kiện để chọn

Question

Tôi lấy ví dụ về here, Demo 6

Tất cả mọi thứ hoạt động tốt, tuy nhiên tôi không thể tìm ra cách để đưa bộ xử lý, trong đó sẽ mất từ ​​giá trị đó. Đó là, khi bạn thay đổi bộ chọn để thay đổi "nội dung". Đây là mã của bộ chọn:

<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> 

, Nhưng trên trang đã hiển thị

<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> 

, tôi nhận ra rằng điều này "chuyển đổi" xảy ra

jquery.dropdown.js 

---

tạo 2 biểu mẫu, forma1 với id = "f1", và form2 tương tự c id = "f2", một biểu mẫu đã ẩn. Đặt trên Chọn

onChange="a(this.value)" 

,

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

chọn tác phẩm Neutral, nhưng đây không phải là. Nếu trình duyệt bảng điều khiển gọi hàm có giá trị nhất định, ví dụ: а (2), tất cả các đầu ra bình thường.

Vì vậy, giống như vị trí đặt trình xử lý sự kiện, nó sẽ kiểm tra giá trị của trường ẩn ???

Cảm ơn trước

Answer 1

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(); 
     } 
    }); 
});​ 

* LƯU Ý: tôi nên lưu ý rằng tôi cũng thực hiện một sự thay đổi trong 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; 

di chuyển data-valueli-span

Answer 2

Tôi không chắc chắn chính xác những gì bạn đang yêu cầu, tuy nhiên tôi sẽ đâm vào nó.

Tôi giả sử bạn đang hỏi cách thêm trình xử lý vào một lần nhấp vào một trong các 'tùy chọn'. đó là để nói khi ai đó nhấp vào 'Khỉ' bạn muốn xử lý nhấp chuột đó với chức năng.

Từ khi xem nguồn plugin tôi thấy họ đã cho phép một tùy chọn được gọi là 'onOptionSelect'.Tôi không thấy bất kỳ lời giải thích hay tài liệu về tùy chọn này, nhưng nó sẽ xuất hiện, từ nhìn vào nguồn, rằng đây là handler cho sự kiện 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(); 
     } 
    }); 

đây bạn có thể thấy rằng họ đang kêu gọi các ' Chức năng onOptionSelect 'và truyền trong mục được chọn làm tham số duy nhất. Vì vậy, khi bạn đang tạo menu thả xuống trong kịch bản của bạn, thêm chức năng cho trình xử lý của bạn:

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

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

Bằng cách này bạn có thể viết một handler và làm bất cứ điều gì bạn muốn với giá trị đó khi các tùy chọn được nhấp.

Nếu bạn đang cố gắng tìm ra mục nào được chọn trong 'menu thả xuống', bạn cần truy vấn 'ẩn' với tên 'cd-dropdown'. Dữ liệu nhập ẩn này có giá trị đã chọn:

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

Tôi hy vọng điều này hữu ích. Tôi nghĩ rằng plugin đó cần thêm một chút tài liệu.

Answer 3

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