I have a Search Form that works successfully, and is using this jQuery plug-in code:
-
<script>
$(document).ready(function(){
$("select.ui-select").selectWidget({
change: function(changes) {
var channel_id = changes;
var Parent = $('select[name=sub_category]').parent();
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: 120
});
});
</script>
I've attached a few images for visual aid. SearchForm1.png shows the Search Form.
As you can see in (SearchForm2.png), when the Category is selected it drops down a list and the jquery scroll bar.
After a Category is selected and then the Sub-Category is selected, the list comes down, but no jQuery scroll bar (SearchForm3.png).
I'm not sue, but this line:
- var Parent = $('select[name=sub_category]').parent();
maybe should be like this instead:
- var Parent = $('select[name=channel]').parent();
AND then some additional sub-category function should be added (maybe), something like this, possibly:
-
function ??????????? ()
{
$('select[name=
sub_category]').selectWidget({
change : function (changes) {
return changes;
},
effect : "slide",
keyControl : true,
speed : 200,
scrollHeight : 200
});
}
so, that the sub-category has its own scroll bar/effects.
I believe this script just needs the sub-category to have its own:
effect: "slide",
keyControl: true,
speed: 200,
scrollHeight: 120
I look forward to your thoughts/ideas/solutions.