ddslick chọn tùy chọn giá trị bài đăng của tùy chọn đã chọn - plugin jquery

Question

Tôi đang sử dụng ddslick để tạo menu thả xuống với biểu tượng, sự cố duy nhất là khi tôi đăng biểu mẫu giá trị của tùy chọn đã chọn luôn trống, nó hoạt động nếu tôi tắt ddslick.

<script language="javascript" type="text/javascript"> 
$('.cflagdd').ddslick({ 
onSelected: function(selectedData){ 
    //callback function: do something with selectedData; 
    // $('#editcflag').submit(); - this does not work, posts form on page load 
} 
}); 
</script> 

<select class="cflagdd" name="cflag"> 
<option value="0" selected="selected">No action flag set</option> 
<option value="1" data-imagesrc="'.base_url().'images/Actions-flag-green-icon.png">Resolved</option> 
<option value="2" data-imagesrc="'.base_url().'images/Actions-flag-yellow-icon.png">Investigate</option> 
<option value="3" data-imagesrc="'.base_url().'images/Actions-flag-red-icon.png">Urgent</option> 
<option value="4" data-imagesrc="'.base_url().'images/Actions-flag-blue-icon.png">False positive</option> 
</select> 

phiên bản: jquery-1.7.2.js jQuery UI - v1.8.20

Nhờ sự giúp đỡ, nhiều apreceated

Answer 1

Có lẽ một giải pháp tốt hơn so với cái này nhưng những gì tôi đã làm khi tôi chạy vào điều này là tôi lấy giá trị đã chọn của tôi và đặt nó vào một yếu tố đầu vào ẩn.

<script language="javascript" type="text/javascript"> 
    $('.cflagdd').ddslick({ 
     onSelected: function(selectedData){ 
      if(data.selectedIndex > 0) { 
       $('#hidCflag').val(data.selectedData.value); 

       $('#editcflag').submit(); 
      } 
     }  
    }); 
</script> 

<input type="hidden" name="hidCflag" id="hidCflag" value="" /> 

<select class="cflagdd" name="cflag"> 
    <option value="0" selected="selected">No action flag set</option> 
    <option value="1" data-imagesrc="'.base_url().'images/Actions-flag-green-icon.png">Resolved</option> 
    <option value="2" data-imagesrc="'.base_url().'images/Actions-flag-yellow-icon.png">Investigate</option> 
    <option value="3" data-imagesrc="'.base_url().'images/Actions-flag-red-icon.png">Urgent</option> 
    <option value="4" data-imagesrc="'.base_url().'images/Actions-flag-blue-icon.png">False positive</option> 
</select> 

Answer 2

Plugin ddslick thay đổi tất cả các thẻ đã chọn và tạo một trường hợp ẩn mới <input> cho chúng. Nhìn vào mã của bạn và có thể bạn sẽ tìm thấy một đầu vào không xác định:

<input name="undefined" id="undefined" class="dd-selected-value" type="hidden" value="1"> 

Cái gì đó không phải là tất cả để xoá trên plugin-page là plugin cần một div xung quanh VÀ một tên và id cho select-thẻ để làm việc đúng cách. Vì vậy, sử dụng:

<div id="cflagdd_container"> 
    <select class="cflagdd" name="cflag" id="cflag"> 
      <option value="0">No action</option> 
      <option value="1" selected data-imagesrc="...">Resolved</option> 
      ... 
    </select> 
</div> 

Bây giờ bạn có một đầu vào hợp lệ:

<input name="cflag" id="cflag" class="dd-selected-value" type="hidden" value="1"> 

Tham khảo container trong jquery của bạn:

$('.cflagdd_container').ddslick(); 

Answer 3

Bạn có để đưa selectedData của ddslick trong một trường như input.hidden. Sau đó, ddslick hiển thị phần tử nhập vào HTML. Không có cách nào một phần tử html gửi dữ liệu khi bạn gửi biểu mẫu đơn giản. ;)

Answer 4

Snipe656 ý tưởng khái niệm hoạt động nhưng tập lệnh có lỗi. Phần kịch bản chính xác nên được:

<script language="javascript" type="text/javascript"> 
    $('.cflagdd').ddslick({ 
     onSelected: function(data){ 
      if(data.selectedIndex > 0) { 
       $('#hidCflag').val(data.selectedData.value); 

       $('#editcflag').submit(); 
      } 
     }  
    }); 
</script> 

(...)

Answer 5

@ John J

tôi đã cùng một vấn đề như bạn. Tất cả những lời khuyên/gợi ý ở đây không giúp được gì.

Sự cố với ddslick lỗi của nó. Không có tên nào được gửi cùng với mục đã chọn nhưng điều này

phải là.

Hãy thử kế này:

http://ddslickremablized.remabledesigns.com/

lỗi của bạn là cố định trong phiên bản này. Mục đã chọn sẽ được gửi chính xác đến máy chủ.

Answer 6

Bạn có thể thử điều này, nó đã hiệu quả đối với tôi.

$('.cflagdd').ddslick({ 
onSelected: function(selectedData){ 
    $('.dd-selected-value').prop ('name', 'cflag'); 
} 
}); 

Answer 7

Có lỗi trong ddslick để lại các đầu vào bị ẩn mà không có thuộc tính tên.

Tôi có thể thêm một vài dòng vào ddslick để làm cho nó thêm thuộc tính tên của lựa chọn vào phần tử ẩn mà nó tạo ra.

Trước tiên, tải phiên bản nén của ddslick: http://dl.dropboxusercontent.com/u/40036711/Scripts/jquery.ddslick.js

Sau đó, thêm dòng sau vào dòng 106, hoặc ngay sau khi các dòng bắt đầu bằng "var ddSelect = ...":

// set hidden input name 
ddSelect.find('input.dd-selected-value').attr('name', $(this).attr('name')); 

Answer 8

Dưới đây là sửa chữa cho điều này:

https://github.com/ahmeij/ddslick/commit/6a085996428dd6f1a06a6fd2195c8f4f13d8ab28

TÌM dòng này trong MÃ NGUỒN UNMINIFIED (tại dòng 103)

obj.addClass('dd-container').append(ddSelectHtml).append(ddOptionsHtml); 

VÀ ADD NÀY DƯỚI CNTT:

// Inherit name attribute from original element 
obj.find("input.dd-selected-value").attr("name", $(original).attr("name")) 

này cố định vấn đề này đối với tôi!

Answer 9

Solution 
<select id="status" name="status" class="ddslick" > 
     <option value="1">Admin Only</option> 
     <option value="2">Editing</option> 
     <option value="3">Review</option> 
     <option value="4">Live</option> 
</select> 

<script> 
$("select.ddslick").each(function(){ 
     var name = $(this).attr('name'); 
     var id = $(this).attr('id'); 
     $("#"+id).ddslick({ 
      showSelectedHTML: false, 
      onSelected: function(selectedData){ 
       $("#"+id+ " .dd-selected-value").prop ('name', name); 
      } 
     }); 
    }); 
</script> 

Answer 10

Được quản lý để khắc phục bằng cách thêm động tên vào đầu vào ẩn lưu trữ giá trị của tùy chọn đã chọn.

Trong HTML:

<select id='locationList'> 
    <option value="a">a</option> 
    ... 
</select> 

Trong javascript:

1. "ddslick" nó:

   $('#locationList').ddslick(); 
   

2. động thêm thuộc tính tên để ẩn

   $('#locationList').find('input[type=hidden]:first').attr("name", "location"); 
   

Answer 11

Tìm văn bản này trong jquery.ddslick.min.js và thêm một tên này

<input class="dd-selected-value" type="hidden" /> 

này sẽ được gửi dữ liệu chính xác đến máy chủ

<input class="dd-selected-value" name="cflag" type="hidden" />