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

感谢您的帮助，非常感谢

score 14 · Accepted Answer

ddslick 中有一个错误，它使隐藏的输入没有名称属性。

我能够在 ddslick 中添加几行以使其将选择的名称属性添加到它创建的隐藏元素中。

一、下载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'));

score 5 · Accepted Answer

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

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

score 3 · Accepted Answer

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

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

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

(...)

score 3 · Accepted Answer

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>

score 2 · Accepted Answer

在jquery.ddslick.min.js中找到此文本并为其添加名称

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

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

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

score 2 · Accepted Answer

下载稳定版

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

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

score 2 · Accepted Answer

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

在 HTML 中：

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

在 Javascript 中：

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

动态添加名称属性到隐藏

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

score 1 · Accepted Answer

这是解决此问题的方法：

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

这为我解决了这个问题！

score 0 · Accepted Answer

您必须将 ddslick 的selectedData放在input.hidden之类的字段中。然后，ddslick将输入元素呈现为 HTML。当您进行简单的表单提交时，html 元素无法发送数据。;)

score 0 · Accepted Answer

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

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

在插件页面上并不是所有的事情都需要明确的是，插件需要一个周围的 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();

score 0 · Accepted Answer

@约翰·J

我和你有同样的问题。所有这些提示/提示都没有帮助。

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

应该。

试试这个继任者：

http://ddslickremablized.remabledesigns.com/

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

score 0 · Accepted Answer

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

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

jquery - ddslick 选择选项不会发布所选选项的值 - jquery 插件

12 回答 12

Related

Reference