Help with getting sub-category jquery drop-down menu to populate

I have a Search Form on a web page that works successfully, where when a Category is chosen the sub-category drop-down populates successfully after the Category is chosen, that uses this code (and see the first attached image):

<script>
$(document).ready(function() {
$("select[name='channel']").change(function() {
var channel_id = $(this).val();

console.log(channel_id);

$("select[name='sub_category']").html("<option value='All'>Sub Category</option>");

$.ajax({
type: "POST",
url: "/ajax.php",
data: "channel_id="+channel_id,
dataType: 'json',
statusCode: {
200: function(data) {
for(i = 0; i < data.length; i ++) {
$("select[name='sub_category']").append("<option value='"+data[i]["sub_channel_id"]+"'>"+data[i]["sub_channel_name"]+"</option>");
}
}
}
});
});
});
</script>

Code (markup):

But when a jquery plug-in is added in, the Search Form works except the sub-category drop-down doesn't populate successfully after a Category is chosen, the jQuery script uses this code:

<script>
$(document).ready(function(){
$("select.ui-select").selectWidget({
change :function(changes){return changes;},
effect :"slide",
keyControl :true,
speed :200,
scrollHeight :250});});</script>

So, I was able to contact the script's author and he said this:


if you are using $(...).change(function(){ // Do something });, ....on this drop-down script change is working only in
change : function (changes) {
return changes;
},

...look at your view source, there you will find $('select').change();


So, I'm guessing that I have to somehow combine the two codes, maybe use

change       : function (changes) {
return changes;
},

Code (markup):

and not

.change(function()

Code (markup):

possibly?

Any additional help will be appreciated.

 

You'll basically need to move your existing function within the change option in the selectWidget. Make sure to place the existing function in an if {} condition if you have more selects on the page.

 

Thanks for your reply.
This revised code works successfully with the categories & sub-categories, now:

<script>
$(document).ready(function(){
$("select.ui-select").selectWidget({
    change: function(changes) {

      var channel_id = changes;
      var Parent = $('select[name=sub_category]').parent();
      Parent.html('');
      Parent.html('<select name="sub_category"><option value="All">Sub Category</option></select>');
$.ajax({ type: "POST",
url: "/ajax.php",
data: "channel_id="+channel_id,
dataType: 'json',
statusCode: {
200: function(data) {
for(i = 0; i < data.length; i ++) {
$("select[name='sub_category']").append("<option value='"+data[i]["sub_channel_id"]+"'>"+data[i]["sub_channel_name"]+"</option>");
}
}
}
});
      return changes;
    },
    effect: "slide",
    keyControl: true,
    speed: 200,
    scrollHeight: 250
  });
});
</script>

Code (markup):

Although the Search Form works successfully (see SearchForm1.png attached),

when I choose a selection, from the Category drop-down list (see SearchForm2.png attached),

the look of the sub-category(Optional) section changes (see SearchForm3.png attached).

The sub-category box(Optional) does not show the jQuery drop-down list/scroll, just the sub-category field box (although it does functionally work successfully).

Do you have a suggestion/idea to fix this so it keep the same style as the rest of the jQuery drop-down menu?

 

Depending on how it's set up, adding the ui-select class should work - if not, you'll have to initialise the sub-category one as a selectWidget as well - not 100% sure as how to do that, since I've never used selectWidget for this, but it's usually enough to just do .selectWidget(); after the element is made.

 

Thanks for your reply. Greatly appreciated.
Could you please give me an example of what you mean by "do .selectWidget(); after the element is made"?

(Or, if there was a way to change the code so only the sub_category gets the scroll/effect, not the Category drop-down, I'd have an interest in that, also).