ddslick选择选项赢得所选选项的后期值 - jquery插件

Question

我正在使用ddslick使用图标制作下拉菜单,唯一的麻烦是当我发布表单时所选选项的值始终为空,如果我关闭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>

版本:Jquery-1.7.2.js jQuery UI - v1.8.20

感谢您的帮助,非常感谢

Answer 1

ddslick中存在一个错误,它会在没有name属性的情况下保留隐藏的输入.

我能够在ddslick中添加几行,以便将select的name属性添加到它创建的隐藏元素中.

首先,下载ddslick的未压缩版本:http://dl.dropboxusercontent.com/u/40036711/Scripts/jquery.ddslick.js

然后在第106行添加以下内容,或者在以"var ddSelect = ..."开头的行后面添加:

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

Answer 2

也许是比这个更好的解决方案，但是当我遇到这个问题时，我所做的就是将我选择的值放入隐藏的输入元素中。

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