कुछ लोग आपके कोड के बारे में सोचते हैं
-
AJAX के साथ, डेटा भेजने और पुनर्प्राप्त करने के लिए JSON का उपयोग करने का प्रयास करें, यह आपको vars और UI के बारे में अधिक स्वतंत्रता देने वाला है।
-
जैसा कि आप jQuery का उपयोग कर रहे हैं, ऑनलाइन ईवेंट को परिभाषित किए बिना, जितना संभव हो सके इसका उपयोग करने का प्रयास करें, यदि आप उन्हें स्क्रिप्ट में समूहित करते हैं तो आपके लिए इसे प्रबंधित करना आसान हो जाएगा।
-
चयन के बारे में, उन्हें फिर से लोड करना काफी मुश्किल है। आईई में मुझे याद है कि मैं विकल्प नहीं जोड़ सका, इसलिए, आपको पूरे चयन को लोड करना होगा।
-
PHP mysql_query फ़ंक्शंस का उपयोग न करें, काफी बहिष्कृत हैं। इसे पढ़ें और लागू करें: मैं PHP में SQL इंजेक्शन को कैसे रोक सकता हूँ?
-
AJAX से मान लोड करते समय, आपको हैंडलर को DOM तत्वों से जोड़ना होगा, इसलिए .on() फ़ंक्शन का उपयोग करके, यह सुनिश्चित करने के लिए कि यह हैंडलर को तत्वों से जोड़ता है।
-
JQuery के नए पुस्तकालयों का उपयोग करने का प्रयास करें, क्योंकि वे तेज़, शक्तिशाली हैं और प्रदर्शन में वृद्धि हुई है, 1.4 बहुत पुराना है...
मैंने आपको उपरोक्त चीजों का उपयोग करने वाले देशों के ड्रॉपडाउन का एक उदाहरण लिखा है, ताकि आपको यह पता चल सके कि इसे कैसे प्राप्त किया जाए, जो आपको लगता है कि आपको यह पसंद है:
index.html:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
$(document).on('change', '#div_country select, #div_state select', function () {
var $type = $(this).attr('data-type');
var $id = $(this).val();
if ( $id != -1 ) {
loadSelect( $type, $id );
}
});
function loadSelect( $type, $id ) {
$.ajax({
type: 'post',
url: 'states.php',
cache: false,
data: {
'type': $type
, 'id': $id
},
dataType: 'json',
success: function (data) {
if ( data.result == true ) {
if (data.html !== undefined) {
var $div = '';
if ( $type == 'country') {
$div = 'state';
} else {
$div = 'city';
}
$( "#div_" + $div ).html(data.html);
}
} else {
alert('Something went wrong!');
}
}
});
}
});
</script>
<div id="div_country">
<select data-type="country">
<option value="-1">Select Country</option>
<option value="1">Spain</option>
<option value="2">France</option>
<option value="3">Germany</option>
</select>
</div>
<div id="div_state">
<select data-type="state">
<option value="-1">Select Country</option>
</select>
</div>
<div id="div_city">
<select>
<option value="-1">Select State</option>
</select>
</div>
</body>
</html>
state.php
<?php
$type = isset( $_POST['type'] ) ? $_POST['type'] : '';
if ( !empty( $type ) ) {
switch ($type) {
case 'country':
$result = true;
$html = '<select data-type="state">
<option value="-1">Select State</option>
<option value="1">state 1</option>
<option value="2">state 2</option>
</select>';
break;
case 'state':
$result = true;
$html = '<select data-type="city">
<option value="-1">Select City</option>
<option value="1">city 1</option>
<option value="2">city 2</option>
</select>';
break;
default:
$result = false;
$html = '';
break;
}
}
$data = array(
'result' => $result,
'html' => $html
);
मैंने आपको इसे प्राप्त करने के तरीके के बारे में एक सुराग देने के लिए जोड़ा है, यह एक अकेला उदाहरण है, और आप ड्रॉपबॉक्स के परिवर्तन देखेंगे। आपको PHP तर्क जोड़ना होगा, लेकिन मैं आपको एक बेहतर तरीका दिखाना चाहता था, XD
