html tag where i am calling showDiv() function
<div class="col-xs-12 margin-y">
<div class="width">
<label class="col-xs-4 col-md-2">Select your preference<span>*</span></label>
<div class="col-xs-6 col-md-10">
<div class="col-xs-6">
<select class="form-control" id="req_prp_type" name="req_prp_type" onchange="return showDiv();" required>
<option value="">Please Select</option>
<?php echo $this->home_model->get_dropdown('prp_type')?>
</select>
</div>
<div class="col-xs-6">
<select class="form-control" id="req_prp_mode" name="req_prp_mode" onchange="return showDiv();" required>
<option value="">Please Select</option>
<?php echo $this->home_model->get_dropdown('prp_mode')?>
</select>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function showDiv($value) {
var req_prp_type = $('#req_prp_type').val();
var req_prp_mode = $('#req_prp_mode').val();
if (req_prp_type != '' && req_prp_mode != '') {
if ((req_prp_type == 1 && req_prp_mode == 1) || (req_prp_type == 1 && req_prp_mode == 2)) {
$("#data").html('<div class="col-xs-12 margin-y"><div class="width"><div class="col-xs-12"><div class="col-xs-12 col-md-6 margin-y"><div class="width"> <div class="col-xs-12 col-md-10"><div class="col-xs-12 margin-y"><label class="col-xs-12 col-md-6">Commercial Type</label><select class="form-control ddlCars col-xs-6" multiple="multiple"><?php echo $this->home_model->get_dropdown('
commercial_type ')?></select></div></div></div></div></div></div></div><div class="col-xs-12 margin-y"><label class="col-xs-12 col-md-6">Condition</label><select class="form-control ddlCars col-xs-6" multiple="multiple">><?php echo $this->home_model->get_dropdown('
pri_condition ')?> </select></div>');
}
}
}
this function is bootstrap multiple select js
$(document).ready(function() {
$('.ddlCars').multiselect();
$('.ddlCars1').multiselect({
numberDisplayed: 1,
});
$('.ddlCars').multiselect({
includeSelectAllOption: true,
enableFiltering: true
});
$('.ddlCars').multiselect({
nonSelectedText: 'Select'
});
});
$('.amItem').on('click', function() {
$(this).toggleClass('inactive');
});
i have used those .css and .js
assets/css/bootstrap-multiselect.css" rel="stylesheet">
assets/js/bootstrap-multiselect.js">
I had multiple jquery.js called in my view. I have deleted multiple and have kept one. I have called my show_div function and my multiselect function in a single tag script tag.
Check out this fiddle perfect work on this
https://jsfiddle.net/jdndnd9k/
// HTML Part
<a id="show" href=Javascript:void(0);>Show</a>
<div id="div_show" style="display:none;">
<select id="data" multiple="multiple">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
</div>
// JS Part
$("#show").click(function(){
$("#div_show").show();
});
$(document).ready(function() {
$('#data').multiselect();
});
if now any problem then check your console and solve error.
Related
I have select options contains languages, it's supposedly that user choose multiple options (languages) or an option (language), and i want user when choose an option (language), new select option shows, and contains his level in that language.
when user select multiple languages (english, arabic, france), three select option show, his level in these language, and when unselect any options, it's supposed to, the select option (that contains his level in that language) become hidden and reset (return to default select (first option)).
but i've some problems in my code
1- when user select multiple options, multiple select options that contains his level don't show all at once.
2- when user unselect an option it stills show and not reset (return to default select (first option))?!!
could you help me please
my view blade with script:
#extends('layouts.app')
#section('content')
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="languages">Languages</label>
<select id="languages" class="form-control" multiple>
<option>Choose Language...</option>
<option value="1">English</option>
<option value="2">Arabic</option>
<option value="3">France</option>
<option value="4">Espanole</option>
</select>
</div>
</div>
<div id="arabicShow" style="display: none" class="form-row">
<div id="" class="form-group col-md-6">
<label for="arabic">Arabic level</label>
<select id="arabic" class="form-control">
<option value='' selected>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="englishShow" style="display: none" class="form-row">
<div class="form-group col-md-6">
<label for="english">English level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="franceShow" style="display: none" class="form-row">
<div class="form-group col-md-6">
<label for="france">France level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
#stop
#section('script')
<script type="text/javascript">
$(document).ready(function (){
$( "#languages option:first-child" ).attr("disabled","disabled");
$( "#arabic option:first-child" ).attr("disabled","disabled");
$( "#english option:first-child" ).attr("disabled","disabled");
$( "#france option:first-child" ).attr("disabled","disabled");
$('#languages').change(function(){
var text = $(this).find("option:selected").text().trim(); //get text
if(text === "Arabic"){
$('#arabicShow').show();
}else if(text === "English"){
$('#englishShow').show();
}else if(text === "France"){
$('#franceShow').show();
}else {
$('#arabicShow').hide();
$('#englishShow').hide();//hide
}
});
});
</script>
#stop
You can use .each loop to iterate through all selected options and then depending on condition show require select-boxes.
Demo Code :
$(document).ready(function() {
$("#languages option:first-child").attr("disabled", "disabled");
$("#arabic option:first-child").attr("disabled", "disabled");
$("#english option:first-child").attr("disabled", "disabled");
$("#france option:first-child").attr("disabled", "disabled");
$('.selects').hide(); //hide all
$('#languages').change(function() {
$('.selects select:not(:visible)').val(""); //reset
$('.selects').hide(); //hide all
//loop through all selected options..
$(this).find("option:selected").each(function() {
var text = $(this).text()
if (text === "Arabic") {
$('#arabicShow').show();
} else if (text === "English") {
$('#englishShow').show();
} else if (text === "France") {
$('#franceShow').show();
}
})
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="languages">Languages</label>
<select id="languages" class="form-control" multiple>
<option>Choose Language...</option>
<option value="1">English</option>
<option value="2">Arabic</option>
<option value="3">France</option>
</select>
</div>
</div>
<!--added one common class i.e : selects-->
<div id="arabicShow" class="form-row selects">
<div id="" class="form-group col-md-6">
<label for="arabic">Arabic level</label>
<select id="arabic" class="form-control">
<option value='' selected>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="englishShow" class="form-row selects">
<div class="form-group col-md-6">
<label for="english">English level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="franceShow" class="form-row selects">
<div class="form-group col-md-6">
<label for="france">France level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
I am trying to disable 2 select boxes if an input text field has a value. If the value of the input text field is cleared, the select boxes should be enabled again. It seems to work well the first time or if I never touch either one of the select boxes but it seems if I even active them, they will not disable again. For example, if I enter text into the input box the 2 select boxes are disabled and if I clear it they are enabled again, but then when I type in the text box to disable them again it does not work if I have activated either of the select boxes.
HTML
<p><b>Area Search:</b> Choose one </p>
<div class="form-group row">
<div class="form-group col-md-4">
<input type="text" class="form-control" id="zipcode" placeholder="Zip Code">
</div>
</div>
<div class="form-group row">
<div class="form-group col-md-4">
<select class="selectpicker" title="Borough" multiple data-live-search="true" multiple data-max-options="1"
id="boroughselect">
<option value="BX">Bronx</option>
<option value="BK">Brookyln</option>
<option value="MN">Manhattan</option>
<option value="SI">Staten Island</option>
<option value="QN">Queens</option>
</select>
</div>
</div>
<div class="form-group row">
<div class="form-group col-md-4">
<select class="selectpicker" title="Neighborhood" multiple data-live-search="true" multiple data-max-options="1"
id="neighborhoodselect">
</select>
</div>
</div>
JS
$("#zipcode").keyup(function() {
var zipcode = $("#zipcode").val();
if (zipcode != "") {
console.log('disabled');
document.getElementById("boroughselect").disabled = true;
document.getElementById("neighborhoodselect").disabled = true;
} else if (zipcode == "") {
console.log('enabled');
document.getElementById("boroughselect").disabled = false;
document.getElementById("neighborhoodselect").disabled = false;
}
});
I do not know what you did with your real code, but it works perfectly in JS
const sel_1 = document.querySelector('#boroughselect' )
, sel_2 = document.querySelector('#neighborhoodselect' )
, zipcode = document.querySelector('#zipcode' )
zipcode.oninput=_=>
{
sel_1.disabled = sel_2.disabled = (zipcode.value!=='')
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<p><b>Area Search:</b> Choose one </p>
<div class="form-group row">
<div class="form-group col-md-4">
<input type="text" class="form-control" id="zipcode" placeholder="Zip Code">
</div>
</div>
<div class="form-group row">
<div class="form-group col-md-4">
<select class="selectpicker" title="Borough" data-live-search="true" id="boroughselect">
<option value="BX">Bronx</option>
<option value="BK">Brookyln</option>
<option value="MN">Manhattan</option>
<option value="SI">Staten Island</option>
<option value="QN">Queens</option>
</select>
</div>
</div>
<div class="form-group row">
<div class="form-group col-md-4">
<select class="selectpicker" title="Neighborhood" data-live-search="true" id="neighborhoodselect">
<option value="BX">Bronx</option>
<option value="BK">Brookyln</option>
<option value="MN">Manhattan</option>
<option value="SI">Staten Island</option>
<option value="QN">Queens</option>
</select>
</div>
</div>
Your code looks fine it's only the way you handle the disabled attribute needs a bit fix.
$('#zipcode').on('keyup', function () {
if ($(this).val().length) {
$('#boroughselect').attr('disabled', true);
$('#neighborhoodselect').attr('disabled', true);
console.log('disabled');
} else {
$('#boroughselect').attr('disabled', false);
$('#neighborhoodselect').attr('disabled', false);
console.log('enabled');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><b>Area Search:</b> Choose one </p>
<div class="form-group row">
<div class="form-group col-md-4">
<input type="text" class="form-control" id="zipcode" placeholder="Zip Code">
</div>
</div>
<div class="form-group row">
<div class="form-group col-md-4">
<select class="selectpicker" title="Borough" multiple data-live-search="true" multiple data-max-options="1"
id="boroughselect">
<option value="BX">Bronx</option>
<option value="BK">Brookyln</option>
<option value="MN">Manhattan</option>
<option value="SI">Staten Island</option>
<option value="QN">Queens</option>
</select>
</div>
</div>
<div class="form-group row">
<div class="form-group col-md-4">
<select class="selectpicker" title="Neighborhood" multiple data-live-search="true" multiple data-max-options="1"
id="neighborhoodselect">
</select>
</div>
</div>
I have this dropdown
<div class="box-body">
<div class="form-group">
<label class="col-sm-2 control-label col-sm-offset-2" for="LEVEL"><span>*</span>Level:</label>
<div class="col-sm-5">
<select class="form-control" name = "LEVEL" id = "LEVEL">
<option value = "<?= set_value("LEVEL"); ?>"><?= set_value("LEVEL"); ?></option>
<option value="Elementary" > Elementary </option>
<option value="Secondary" > Secondary </option>
<option value="College" > College </option>
<option value="Vocational" > Vocational </option>
<option value="Trade School" > Trade School </option>
<option value="GraduateStudies" > GraduateStudies </option>
</select>
</div>
</div>
</div>
and when I select something, except for elementary and secondary, I want to show this div
<div class="box-body" style="display:none" id = "COURSE">
<div class="form-group">
<label for="COURSE" class="col-sm-2 control-label col-sm-offset-2"><span>*</span>Degree/Course:<br>(Write in full)</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="COURSE" name="COURSE"value = "<?= set_value("COURSE"); ?>">
</div>
</div>
</div>
my javascript is,
$(function() {
$('#LEVEL').change(function(){
$('.COURSE').hide();
if($('#LEVEL').val() == 'Elementary' || 'Secondary'){
$('.COURSE').hide();
}else{
$('#COURSE').show();
}
});
});
the problem is, it is hidden, whatever value I select
Firstly, the COURSE has an id, so your selector is incorrect.
To solve your problem, the if statement must include the full condition in both logical parts, like this:
$('#LEVEL').change(function(){
$('#COURSE').hide();
if($('#LEVEL').val() == 'Elementary' || $('#LEVEL').val() == 'Secondary'){
$('#COURSE').hide();
} else {
$('#COURSE').show();
}
});
Note that you can shorten this by using toggle() with a boolean, and also by using the this keyword to save on DOM accesses:
$('#LEVEL').change(function() {
$('#COURSE').toggle($(this).val() != 'Elementary' && $(this).val() != 'Secondary');
});
Working example
You should use this if statement
$(function() {
$('#LEVEL').change(function(){
$('.COURSE').hide();
if( ($('#LEVEL').val() == 'Elementary') || ($('#LEVEL').val() == 'Secondary')) {
$('.COURSE').hide();
}else{
$('#COURSE').show();
}
}); // change close
}); // function close
You have to change the if condition as if ($('#LEVEL').val() == 'Elementary' || $('#LEVEL').val() == 'Secondary').
Also change $('.COURSE').hide(); to $('#COURSE').hide();.
Note: Id's should be unique. In your code both div and input has same id COURSE
$(function() {
$('#LEVEL').change(function() {
if ($('#LEVEL').val() == 'Elementary' || $('#LEVEL').val() == 'Secondary') {
$('#COURSE').hide();
} else {
$('#COURSE').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-body">
<div class="form-group">
<label class="col-sm-2 control-label col-sm-offset-2" for="LEVEL"><span>*</span>Level:</label>
<div class="col-sm-5">
<select class="form-control" name="LEVEL" id="LEVEL">
<option value="<?= set_value(" LEVEL "); ?>">
<?= set_value( "LEVEL"); ?>
</option>
<option value="Elementary">Elementary</option>
<option value="Secondary">Secondary</option>
<option value="College">College</option>
<option value="Vocational">Vocational</option>
<option value="Trade School">Trade School</option>
<option value="GraduateStudies">GraduateStudies</option>
</select>
</div>
</div>
</div>
<div class="box-body" style="display:none" id="COURSE">
<div class="form-group">
<label for="COURSE" class="col-sm-2 control-label col-sm-offset-2"><span>*</span>Degree/Course:
<br>(Write in full)</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="COURSE" name="COURSE" value="<?= set_value(" COURSE "); ?>">
</div>
</div>
</div>
I'm creating a web form with 3 select boxes with multiple questions. If I select 1st Question from 1st select drop-down that question will not appear in the 2nd select drop-down. It will repeat same as 3rd select drop-down.
Note: The main purpose is if user select any questions from select drop-down that question will not appear in another select drop-down.
Demo Code:
.margin-top-10 { margin-top: 1.0em; }
.margin-top-20 { margin-top: 2.0em; }
.margin-top-30 { margin-top: 3.0em; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-xs-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="row margin-top-20">
<div class="form-group">
<label class="control-label col-sm-12 col-xs-12" for="">Question 1</label>
<div class="col-sm-11 col-xs-12">
<select class="form-control" id="sel1">
<option selected="">Choose your question</option>
<option>Select question 1</option>
<option>Select question 2</option>
<option>Select question 3</option>
<option>Select question 4</option>
</select>
</div>
<div class="col-sm-11 col-xs-12 margin-top-10">
<input type="text" class="form-control" placeholder="Type your answer">
</div>
</div>
</div>
<div class="row margin-top-20">
<div class="form-group">
<label class="control-label col-sm-12 col-xs-12" for="">Question 2</label>
<div class="col-sm-11 col-xs-12">
<select class="form-control" id="sel1">
<option selected="">Choose your question</option>
<option>Select question 1</option>
<option>Select question 2</option>
<option>Select question 3</option>
<option>Select question 4</option>
</select>
</div>
<div class="col-sm-11 col-xs-12 margin-top-10">
<input type="text" class="form-control" placeholder="Type your answer">
</div>
</div>
</div>
<div class="row margin-top-20">
<div class="form-group">
<label class="control-label col-sm-12 col-xs-12" for="">Question 3</label>
<div class="col-sm-11 col-xs-12">
<select class="form-control" id="sel1">
<option selected="">Choose your question</option>
<option>Select question 1</option>
<option>Select question 2</option>
<option>Select question 3</option>
<option>Select question 4</option>
</select>
</div>
<div class="col-sm-11 col-xs-12 margin-top-10">
<input type="text" class="form-control" placeholder="Type your answer">
</div>
</div>
</div>
<div class="row margin-top-20">
<div class="col-xs-6 text-right">
<span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> Back
</div>
<div class="col-xs-6"><a class="btn btn-primary" role="button" href="Registration-Complete.html" name="btnGlassContactInfo">Register <span class="glyphicon glyphicon-ok"></span></a></div>
</div>
</div>
</div>
</div>
</div>
The first thing you might want to do if change the select elements in your code so that each of them has a unique ID. They are all sel1 at the moment :)
Then you need to bind the onchange event to the select options that will remove the option being selected. Here is an example:
$('select').on('change', function() {
var elem = this;
var option = this.value;
$('.form-control option').each(function() {
if ($(this).html() === option && $(elem).attr('id') !== $(this).parent().attr('id')) {
$(this).remove();
}
});
})
You would probably want to disable the user from using the same selection element, or store the removed options and add them back should the user change his / her mind.
I have disabled them in my example, which you can view here.
https://jsfiddle.net/martiensk/jwfeqrx0/
I have written a code for two dropdown boxes. The first dropdown contains a list of main category dynamic values. when i select any one of the value in main category list the second dropdown should appear with corresponding sub category values. How can i do this?
Here is my code:
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
<div class="form-group">
Please Choose Your Category
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
<div class="form-group">
<select class="form-control" name="category_name" onchange="mainInfo(this.value);">
<option value="" selected>Please Select</option>
<option value="Birds">Birds</option>
<option value="Animals">Animals</option>
<option value="Notinlist">Category Not in list</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
<div class="form-group">
Please Choose Your Sub Category
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
<div class="form-group">
<select class="form-control" name="album_name">
<option value="" selected>Please Select</option>
<option value="Birds">Sub Birds</option>
<option value="Animals">Sub Animals</option>
<option value="Notinlist">Category Not in list</option>
</select>
</div>
</div>
</div>
php code to fetch sub category for main category
<?php
$album_category = $_POST['category_name'];
$sql=$conn->prepare("select * from `albums` where album_category=:album_category");
$sql->bindParam(":album_category",$album_category);
$sql->execute();
while ($row = $sql->fetch(PDO::FETCH_ASSOC))
{
echo $row['album_sub_category'];
}
?>
Change your code to something like that :
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
<div class="form-group">
Please Choose Your Category
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
<div class="form-group">
<select class="form-control" name="category_name" id="category_name" onchange="mainInfo(this.value);">
<option value="" selected>Please Select</option>
<option value="Birds">Birds</option>
<option value="Animals">Animals</option>
<option value="Notinlist">Category Not in list</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
<div class="form-group">
Please Choose Your Sub Category
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
<div class="form-group">
<select class="form-control" name="album_name" id="album_name">
<option value="">Please Select</option>
</select>
</div>
</div>
</div>
Add this ajax function :
<script>
function mainInfo(str)
{
var n;
if (str=="0")
{
document.getElementById("album_name").innerHTML="<option>--Select --</option>";
return;
}
if (window.XMLHttpRequest)
{
n=new XMLHttpRequest();
}
else
{
n=new ActiveXObject("Microsoft.XMLHTTP");
}
n.onreadystatechange=function()
{
if (n.readyState==4 && n.status==200)
{
document.getElementById("album_name").innerHTML=n.responseText;
}
}
n.open("GET","sub_category.php&category_name="+str,true);
n.send();
}
</script>
And on the php page which is sub_category.php
<?php
$album_category = $_POST['category_name'];
$sql=$conn->prepare("select * from `albums` where album_category=album_category");
$sql->bindParam(":album_category",$album_category);
$sql->execute();?>
<option value="">--Select State--</option>
<?php
while ($row = $sql->fetch(PDO::FETCH_ASSOC))
{
?>
<option value="<?php echo $row['album_sub_category'];?>"><?php echo $row['album_sub_category'];?></option>
<?php
}
?>
Unless the items in the list are small enough preload load into the page, you're going to have to make an http endpoint for fetching the raw data using AJAX and then draw it on the client with JavaScript. jQuery would make light work of it.
The other option would involve reloading the page for each change... Yuck...
You're client code could be something like this with jQuery:
$.ajax({url: '/categories.json', data: {cat:'category name'}}).done(function(cats){
$.each(cats, function(){
$('#Target').append($('<option>', {value:this}).text(this));
})
}).fail(function(){
// Handle error
});
Since no method id specified it will default to GET and the data object will be converted to GET variables which you can use for the DB query to get the applicable sub categories and return them in JSON with proper JSON headers.