Chaining selects modified with Chosen

JavaScript
1

I’m trying to chain selects with Chosen and [URL=“http://www.appelsiini.net/projects/chained”]Chained but I’m not sure if I’m implementing .chosen().change() correctly or if the error I’m getting is a bug.

Here’s what I’ve got:


<select id="Inputfield_date" name="date" data-placeholder="Select event date">
<option value=""></option>
<option value="WA">WA</option>
<option value="QLD">QLD</option>
<option value="VIC">VIC</option>
<option value="NSW">NSW</option>
<option value="SA">SA</option>
</select>

<select id="Inputfield_code" name="code" data-placeholder="Response code">
<option value=""></option>
<option value="601" class="WA">601</option>
<option value="602" class="WA">602</option>
<option value="402" class="QLD">402</option>
<option value="403" class="QLD">403</option>
<option value="301" class="VIC">301</option>
<option value="302" class="VIC">302</option>
<option value="201" class="NSW">201</option>
<option value="203" class="NSW">203</option>
<option value="501" class="SA">501</option>
</select>

$('#Inputfield_date').chosen().change(function() {
    $("#Inputfield_code").chained("#Inputfield_date");
});

which gives me Uncaught RangeError: Maximum call stack size exceeded.

I also have to show another hidden field if a particular option is chosen and I’m not sure what the correct approach is for that.

I don’t have to use Chained if anyone has a solution that involves that, but I do have to use Chosen, or a script that modifies the look of the select elements to match the design I’ve been given.

2

Hi,

Is there any reason your’re putting the association inside a .change callback?

I would have thought something like this would work:

$('#Inputfield_date').chosen();
$('#Inputfield_code').chosen();
$("#Inputfield_code").chained("#Inputfield_date");

Saying that, I haven’t used either of these plugins, so anything is possible.
If the above doesn’t work, let me know and I’ll have a closer look.

3

Chained only responds to changes to select elements. Because the select is replaced by Chosen, it’s not actually being changed when you choose an option, so it has to fire off an event to Chained to let it know something has changed.

4

Ah ok, well in that case it seems that you need to use chosen:updated
http://harvesthq.github.io/chosen/#change-update-events

Here’s a demo of it working with the latest versions of both plugins.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes</title>
    <link rel="stylesheet" href="chosen.css">
    <style>
      .chosen-select{ width: 210px; }
      label{ display: inline-block; width: 40px; }
      .holder{ margin: 10px 5px; }
    </style>
  </head>
  
  <body>
    <div class="holder">
      <label for="Inputfield_date">Date:</label>
      <select id="Inputfield_date" data-placeholder="Select event date" class="chosen-select">
        <option value=""></option>
        <option value="WA">WA</option>
        <option value="QLD">QLD</option>
        <option value="VIC">VIC</option>
        <option value="NSW">NSW</option>
        <option value="SA">SA</option>
      </select>
    </div>
    
    <div class="holder">
      <label for="Inputfield_code">Code:</label>
      <select id="Inputfield_code" data-placeholder="Response code" class="chosen-select">
        <option value=""></option>
        <option value="601" class="WA">601</option>
        <option value="602" class="WA">602</option>
        <option value="402" class="QLD">402</option>
        <option value="403" class="QLD">403</option>
        <option value="301" class="VIC">301</option>
        <option value="302" class="VIC">302</option>
        <option value="201" class="NSW">201</option>
        <option value="203" class="NSW">203</option>
        <option value="501" class="SA">501</option>
      </select>
    </div>
  
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="chosen.jquery.js" type="text/javascript"></script>
    <script src="http://www.appelsiini.net/projects/chained/jquery.chained.js" type="text/javascript"></script>
    <script type="text/javascript">
      $('.chosen-select').chosen();
      $("#Inputfield_code").chained("#Inputfield_date");
      $("#Inputfield_code").trigger("chosen:updated");
				
      $("#Inputfield_date").on("change", function(){
        $("#Inputfield_code").trigger("chosen:updated")
      });
    </script>
  </body>
</html>

Hope that helps you.

5

Ah right, I hadn’t noticed the chosen:updated function. Awesome, thanks. :slight_smile: