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

问题描述 投票：8回答：12

我正在使用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

感谢您的帮助，非常感谢

jquery jquery-ui jquery-plugins
12个回答
14
投票

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'));
0
投票

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

0
投票

@John J.

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

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

应该。

尝试这个继任者：

http://ddslickremablized.remabledesigns.com/

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

0
投票

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

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

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

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

(...)

2
投票
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>
2
投票

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

在HTML中：

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

在Javascript中：

  1. “ddslick”它： $('#locationList').ddslick();
  2. 动态地将名称属性添加到隐藏 $('#locationList').find('input[type=hidden]:first').attr("name", "location");
2
投票

下载稳定版

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

我几乎尝试过任何答案。有些不适用于多个实例，而其他实例则断开了与固定脚本的链接。我找到了这个ddSlick的最新版本，它实际修复了这个'bug'。

1
投票

这是对此的修复：

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

这为我解决了这个问题！

1
投票

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

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

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

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

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();
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.