Update values after dropdown change

Question

Update values after dropdown change

Asked 9 years, 7 months ago

Viewed 1,923 times

6

I know almost nothing about Javascript but I managed to use Chosen to change my selects. What I’m not getting is to use the Trigger that the site indicates to update the field.

I want each time you click on the select field and the dropdown list action, update the values.

I know the website says to put $("#form_field").trigger("chosen:updated"); but I don’t know where, I don’t know what the #form_field. Is the form id? Field? 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>
<script src="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>

You can put the code you have here?

– Sergio

2014/11/30 at 19:22
How do I put code here?

– adairbsjr

2014/11/30 at 22:44
You can [Edit] the question and put the code in the question. If you need help formatting the code we help.

– Sergio

2014/11/30 at 23:10
I put the code in, but it didn’t all show up.

– adairbsjr

2014/12/01 at 00:08
Hello, fellas. I’ll try to be clearer. I have a film registration form in which you have a country field, for example, to select the countries that co-produced that film. I will create next to this field a new button to register new countries. What I need is for the country field of the first form to update with the new country that I just registered without having to refresh the page, because then I would lose the data typed in the other fields. I think it’s with the update function of Chosen that I’m using, but I don’t know how to use it right. .

– adairbsjr

2014/12/01 at 01:41
There are mistakes here <select name='pais[]' data-placeholder=' ' multiple class='chzn-select');" > has );" the more. There is some error in the console?

– Sergio

2014/12/01 at 07:30
Hello, Sergio. I’ve noticed the error, it was typing, but the problem is not in this code. I want to know what I have to add to it to update the select tag with Chosen. Hugs

– adairbsjr

2014/12/01 at 12:47
It would be ideal to make a jsFiddle with the problem. But I’ll take a look. If you can however put the rendered HTML, better to test.

– Sergio

2014/12/01 at 12:48
Hello, Sergio. Sorry, I don’t know how to use jsFiddle. Want to put screenshots of the page?

– adairbsjr

2014/12/01 at 12:50
Can you explain what’s missing here: http://jsfiddle.net/rq7fkzpk/

– Sergio

2014/12/01 at 13:02
You managed to solve this problem?

– Sergio

2015/11/23 at 06:06

Show 6 more comments

3 answers

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.

by Sam • **79,597** points · Answer 1 · 2015-12-27T04:52:42+00:00

Just create a function that updates the select Chosen, adding a new option at the select. I made an implementation in Sergio’s Fiddle that shows how it works, so just you adapt as you want: http://jsfiddle.net/rq7fkzpk/3/

by Penihel Roosewelt • 86 points · Answer 2 · 2014-12-01T13:32:11+00:00

In your case:

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

Now, to change the subject

Now your problem in 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.

by Penihel Roosewelt • 86 points · Answer 3 · 2014-12-01T13:44:34+00:00

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