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中存在一个错误，它使隐藏的输入没有名称属性。

我能够在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>

Answer 3

Snipe656概念设计有效，但脚本有错误。正确的脚本部分应该是：

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

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

（...）

Answer 4

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 5

通过动态地将名称添加到存储所选选项值的隐藏输入来管理来修复它。

在HTML中：

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

在Javascript中：

“ddslick”它：
```
$('#locationList').ddslick();
```

将名称属性动态添加到隐藏

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

Answer 6

ddslick插件会更改所有选择标记，并为其创建新的隐藏<input>字段。查看您的代码，您可能会发现未定义的输入：

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

在plugin-page上无法清除的一点是，插件需要一个周围的div和一个名称和id，以便select-tag正常工作。所以使用：

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

现在你有了一个有效的输入：

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

请参阅jquery中的容器：

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

Answer 7

您将 ddslick 的 selectedData 放在 input.hidden 这样的字段中。然后， ddslick 将输入元素呈现为HTML。当你做一个简单的表单提交时，html元素不会发送数据。 ;）

Answer 8

@John J

我遇到了和你一样的问题。所有这些提示/提示都没有帮助。

ddslick的问题。没有与所选项目一起发送的名称，但是

应该是。

试试这个继任者：

http://ddslickremablized.remabledesigns.com/

您的错误已在此版本中修复。所选项目将正确发送到服务器。

Answer 9

你可以试试这个，它对我有用。

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

Answer 10

以下是对此的修复：

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

在未经审查的源代码中查找此行（第103行）

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

并添加以下信息：

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

这解决了我的问题！

Answer 11

在 jquery.ddslick.min.js 中删除此文本并为此

添加名称

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

这将向服务器发送正确的数据

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

Answer 12

下载稳定版本

https://raw.githubusercontent.com/jsmodules/ddslick/master/src/jquery.ddslick.js

我已经尝试了几乎所有给出的答案。有些不适用于多个实例，而另一些则断开了与固定脚本的链接。我发现了ddSlick的最新版本，该版本实际上修复了此“错误”。

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

12 个答案: