Update values after changing the dropdown

6

I know almost nothing about JavaScript but I was able to use Chosen to change my selects . What I can not do is use the trigger that the site indicates to update the field.

I want every time I click the select field and the dropdown list button, it updates the values.

I know the site says to put $("#form_field").trigger("chosen:updated"); but I do not know where, I also do not know what #form_field is. Is the form id? From Camp? Do I have to create an event with onselect or onclick ?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="chosen/chosen.css">
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script><scriptsrc="chosen/chosen.jquery.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<title>Cadastro de Filmes</title>
</head>

 <script type="text/javascript">
$(function(){
    $('.chzn-select').chosen({width: "50%", no_results_text: "Sem registro de ", size: "5"});
});
</script>

<body>

<div class='cadastro' >
 <h1>Cadastro de Filmes</h1>
 <form action='' method='post' enctype='multipart/form-data' name='form1' id='form1'>
 <p>País
    <select name='pais[]' data-placeholder=' ' multiple class='chzn-select')
      <?php
        //LAÇO PARA BUSCAR TODOS OS DADOS DO BANCO MARCANDO AQUELES QUE ESTÃO SELECIONADOS 
        $j=0;
        $tam=sizeof($pais_sel);
        for($i=0;$i<sizeof($pais);$i++){
         if($pais[$i]==$pais_sel[$j]){
          echo "<option value='$pais[$i]' selected>$pais[$i]</option>";
         if($j<$tam-1){
          $j++;
         }
        }else{
          echo "<option value='$pais[$i]'>$pais[$i]</option>";
         }      
       }
       ?>
    </select>
    </p>
  <p>
    <input name='enviar' type='submit' id='enviar' value='Enviar' />
  </p>
  </form>
  </div>
    </body>
</html>
    
asked by anonymous 30.11.2014 / 20:02

3 answers

1
<script type="text/javascript">
    $(function(){
    $('.chzn-select').chosen({width: "50%", no_results_text: "Sem registro de ", size:"5"});
    $(document).on('chosen:updated', '.chzn-select', function(e,x){

       //Não sei direito o que voce quer fazer aqui,
       // Mas coloco o código aqui, ele será executado toda vez que o usuario mudar o chosen
      //De uma olhada nos parametros e, x

       alert('Alguma alteração aconteceu');
    });
});
</script>
    
01.12.2014 / 14:44
1

In your case:

$('.chzn-select').trigger("chosen:updated");

Now, changing the subject

Now your problem with updating the country, I suggest you use the knockoutjs and "link" your select to an array, after saving the new country via callback, re-add an item in the array, and your problem will be solved.

    
01.12.2014 / 14:32
1

You just need to create a function that updates the select Chosen by adding a new option to select . I made an implementation in Sergio's Fiddle that shows how it works, then you just have to adapt as you like: link

    
27.12.2015 / 05:52