jQuery - json select probléma
Sziasztok!
Szükségem lenne egy kis segítségre! Szeretnék dupla selectes cuccot összehozni, ha az első selectben kiválasztok egy elemet, akkor a második select tartalma hozzáfrissüljön az oldal újratöltődése nélkül. Kerestettem, kutattam, és kigugliztam egy számomra szimpatikus megoldást: http://websitebuildersresource.com/demos/jquery-select-html-manipulation/multiple.php.
Fogtam, csináltam három fájlt: multiple_select.js, json.php és form.html-t, a linkben mutatott tartalommal, betűről betűre bemutatva:
multiple_select.js :
$(document).ready(function(){
$("select#category").change(function(){
// Post string
var post_string = "type=" $(this).val();
// Send the request and update sub category dropdown
$.ajax({
type: "POST",
data: post_string,
dataType: "json",
cache: false,
url: 'json.php',
timeout: 2000,
error: function() {
alert("Failed to submit");
},
success: function(data) {
// Clear all options from sub category select
$("select#sub_category option").remove();
// Fill sub category select
$.each(data, function(i, j){
var row = "<option value=\"" + j.value + "\">" + j.text + "</option>";
$(row).appendTo("select#sub_category");
});
}
});
});
});
***********************************************************************************
json.php:
$json = array();
if ($_POST['type'] == 1)
{
$json[] = array(
'value' => '1',
'text' => 'Staffordshire Bull Terrier'
);
$json[] = array(
'value' => '2',
'text' => 'Labrador Retriever/American Pit Bull Mix'
);
$json[] = array(
'value' => '3',
'text' => 'German Short Hair Pointer'
);
}
elseif ($_POST['type'] == 2)
{
$json[] = array(
'value' => '4',
'text' => 'Domestic Medium Hair'
);
}
echo json_encode($json);
***********************************************************************************
form.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="multiple_select.js"></script>
<script type="text/javascript" charset="utf-8"></script>
</head>
<select name="category" id="category">
<option value="">-- Select Value --</option>
<option value="1">Dog</option>
<option value="2">Cat</option>
</select>
<select name="sub_category" id="sub_category">
<option value="">-- Select First Value --</option>
</select>
</html>
Majd amikor futtattam FF alól, Firebug alól a kövekező hibaüzenettel tér vissza:
"missing ; before statement
var post_string = "type=" $(this).val();\n"
Nem tudom miért csinálja, igazából a hajam 50%át már kitépkedtem... Tény, hogy abszolút nem értek a jQuery-s okosságokhoz, de azért ennyire nem szoktam elcsúszni a problémákon... A fájlok UNIX/UTF-8 formátumúak, bérelt, nem ingyenes tárhelyen futnak.
Ezen problémában kérnék segítséget, ha van valakinek esetlegesen egy használható megoldása a dupla selectes cuccra (ami műküdik :) ) akkor azt is szívesen fogadom!
üdv: navee
■ Szükségem lenne egy kis segítségre! Szeretnék dupla selectes cuccot összehozni, ha az első selectben kiválasztok egy elemet, akkor a második select tartalma hozzáfrissüljön az oldal újratöltődése nélkül. Kerestettem, kutattam, és kigugliztam egy számomra szimpatikus megoldást: http://websitebuildersresource.com/demos/jquery-select-html-manipulation/multiple.php.
Fogtam, csináltam három fájlt: multiple_select.js, json.php és form.html-t, a linkben mutatott tartalommal, betűről betűre bemutatva:
multiple_select.js :
$(document).ready(function(){
$("select#category").change(function(){
// Post string
var post_string = "type=" $(this).val();
// Send the request and update sub category dropdown
$.ajax({
type: "POST",
data: post_string,
dataType: "json",
cache: false,
url: 'json.php',
timeout: 2000,
error: function() {
alert("Failed to submit");
},
success: function(data) {
// Clear all options from sub category select
$("select#sub_category option").remove();
// Fill sub category select
$.each(data, function(i, j){
var row = "<option value=\"" + j.value + "\">" + j.text + "</option>";
$(row).appendTo("select#sub_category");
});
}
});
});
});
***********************************************************************************
json.php:
$json = array();
if ($_POST['type'] == 1)
{
$json[] = array(
'value' => '1',
'text' => 'Staffordshire Bull Terrier'
);
$json[] = array(
'value' => '2',
'text' => 'Labrador Retriever/American Pit Bull Mix'
);
$json[] = array(
'value' => '3',
'text' => 'German Short Hair Pointer'
);
}
elseif ($_POST['type'] == 2)
{
$json[] = array(
'value' => '4',
'text' => 'Domestic Medium Hair'
);
}
echo json_encode($json);
***********************************************************************************
form.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="multiple_select.js"></script>
<script type="text/javascript" charset="utf-8"></script>
</head>
<select name="category" id="category">
<option value="">-- Select Value --</option>
<option value="1">Dog</option>
<option value="2">Cat</option>
</select>
<select name="sub_category" id="sub_category">
<option value="">-- Select First Value --</option>
</select>
</html>
Majd amikor futtattam FF alól, Firebug alól a kövekező hibaüzenettel tér vissza:
"missing ; before statement
var post_string = "type=" $(this).val();\n"
Nem tudom miért csinálja, igazából a hajam 50%át már kitépkedtem... Tény, hogy abszolút nem értek a jQuery-s okosságokhoz, de azért ennyire nem szoktam elcsúszni a problémákon... A fájlok UNIX/UTF-8 formátumúak, bérelt, nem ingyenes tárhelyen futnak.
Ezen problémában kérnék segítséget, ha van valakinek esetlegesen egy használható megoldása a dupla selectes cuccra (ami műküdik :) ) akkor azt is szívesen fogadom!
üdv: navee
hibaüzenet
var post_string = "type="
Köszönöm