ddslick select options won't post value of selected option - jquery plugin

Question

J'utilise ddslick pour faire des menus déroulants avec des icônes, le seul problème est que lorsque je poste le formulaire la valeur de l'option sélectionnée est toujours vide, cela fonctionne bien si je désactive 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>

Versions : Jquery-1.7.2.js jQuery UI - v1.8.20

Merci de votre aide.

Answer 1

Il y a un bogue dans ddslick qui laisse les entrées cachées sans attribut de nom.

J'ai pu ajouter quelques lignes à ddslick pour qu'il ajoute l'attribut du nom de la sélection à l'élément caché qu'il crée.

Tout d'abord, téléchargez la version non compressée de ddslick : http://dl.dropboxusercontent.com/u/40036711/scripts/jquery.ddslick.js

Ajoutez ensuite ce qui suit à la ligne 106, ou juste après les lignes commençant par "var ddSelect = ..." :

// set hidden input name
ddSelect.find('input.dd-selected-value').attr('name', $(this).attr('name'));

Answer 2

Il existe peut-être une meilleure solution que celle-ci, mais ce que j'ai fait lorsque j'ai rencontré ce problème, c'est que j'ai pris ma valeur sélectionnée et l'ai placée dans un élément d'entrée caché.

<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

L'idée conceptuelle de Snipe656 fonctionne mais le script contient une erreur. La partie correcte de script devrait être :

<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

J'ai réussi à résoudre le problème en ajoutant dynamiquement un nom à l'entrée cachée qui stocke la valeur de l'option sélectionnée.

Dans l'HTML :

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

Dans le Javascript :

1. "ddslick" :

   $('#locationList').ddslick();

2. Ajouter dynamiquement l'attribut name à l'attribut hidden

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