2012-07-12 131 views
8

我正在使用ddslick使下拉菜單的圖標,唯一的麻煩是當我發佈表單時,所選選項的值始終爲空,它的工作原理罰款如果我把ddslick關閉。ddslick選擇選項won'st post選定選項的值-jQuery插件

<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用戶界面 - v1.8.20

感謝您的幫助,很多apreceated

回答

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

ddslick插件更改所有select-tags,併爲它們創建一個新的隱藏的<input>-字段。看看你的代碼,你可能會發現一個未定義的輸入:

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

的東西,是不是所有能清晰地在plugin-page是該插件需要爲選擇標籤的周圍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(); 
+0

我這樣做會被髮送正確的數據服務器是什麼你說,我的輸入從來沒有一個名稱+ ID只是class =「dd-selected-value」,我必須創建一個額外的隱藏字段,以在表單提交中將所選值傳遞給Web服務器。 – Elisabeth 2012-12-29 22:12:29

+0

您的原始標籤是否有ID? – Linkmichiel 2013-01-17 12:19:07

0

放的selectedDataddslick in like field input.hidden。然後,ddslick呈現輸入元素爲HTML。當您進行簡單的表單提交時,html元素無法發送數據。 ;)

+1

請改善您答案的格式,使其更具可讀性。另見http://www.stackoverflow.com/questions/how-to-answer – Spontifixus 2012-12-04 16:54:42

+0

@Spontifixus歡迎您自己編輯此類答案。不僅你會提高質量。你甚至會得到一些額外的聲譽。 – 2012-12-04 16:57:02

+1

@KonradViltersten JavaScript並不是我的專業核心領域,所以我不確定將什麼格式化爲代碼以及簡單強調的內容。另外,只有改變格式的編輯纔會被拒絕,因爲它太小。通常我自己做編輯,但在這種情況下,我決定問題的作者(或者在這個主題上有更多專業知識的人)可以比我做得更好。 – Spontifixus 2012-12-04 17:07:14

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> 

(...)

0

@約翰Ĵ

我有同樣的問題,像你這樣的。所有這些提示/提示都沒有幫助。

ddslick它的越野車的問題。沒有與所選項目一起發送的名稱,但是這個

應該是。

試試這個繼任者:

http://ddslickremablized.remabledesigns.com/

你的錯誤是固定在這個版本。所選項目將被正確發送到服務器。

0

你可以試試這個,它對我很有用。

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

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')); 
+1

這幾乎是文學救命的答案!謝謝!!!! – 2015-05-26 20:16:22

+1

非常有用。 Upvoted。 OP應設置爲Answer – 2015-05-29 19:47:38

+0

Dude。謝謝。 – Joel 2015-11-11 16:48:36

0

這裏的修復此:

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

找到這一行IN THE UNMINIFIED的源代碼(AROUND線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
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> 
1

管理人動態地添加一個名稱來存儲所選擇的選項的值隱藏的輸入來解決它。

在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"); 
    
0

找到這個文本jquery.ddslick.min.js 和名稱添加到這個

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

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