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 にいくつかの行を追加して、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'));

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

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

選択したオプションの値を格納する非表示の入力に名前を動的に追加することで、なんとか修正しました。

HTML では:

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

Javascript では:

それを「ddslick」：
```
$('#locationList').ddslick();
```

name 属性を hidden に動的に追加する

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

score 1 · Accepted Answer

これに対する修正は次のとおりです。

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

UNMINIFIED ソースコードでこの行を見つけます (行 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 プラグインはすべての選択タグを変更し、新しい隠しフィールドを作成<input>します。コードを調べると、未定義の入力が見つかる可能性があります。

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

プラグインページで明確にする必要があるのは、プラグインが適切に機能するために select-tag を囲む div と名前と ID を必要とすることです。だから使用：

<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

You have to put the selectedData of ddslick in a field like input.hidden. Then, ddslick renders an input element into HTML. No way a html-element sends data when you do a simple form-submit. ;)

jquery - ddslickの選択オプションは選択されたオプションの値を投稿しません-jqueryプラグイン

12 に答える 12

Related

Reference