मेरे पास मेरे पृष्ठ पर 2 चुनिंदा ड्रॉप डाउन हैं।जब आप पहली ड्रॉप डाउन से किसी श्रेणी का चयन करते हैं, तो उस श्रेणी के उत्पादों को लाने और उन्हें दूसरे पड़ोसी ड्रॉप डाउन में प्रदर्शित करने के लिए एक अजाक्स कॉल किया जाता है। एक छोटे से विवरण को छोड़कर, यह सब बढ़िया काम करता है। जब मैं एक नई श्रेणी का चयन करता हूं, तो मैं चाहता हूं कि उत्पाद: ओवर लिखना दूसरे ड्रॉप डाउन के भीतर विवरण। फिलहाल मैं एपेंड विधि का उपयोग कर रहा हूं और यह स्पष्ट रूप से उन्हें जोड़ता है। मैंने .html और .text विधियों की कोशिश की है और वे टेक्स्ट प्रदर्शित नहीं करते हैं।
पहला ड्रॉप डाउन मान एक Laravel कॉल का उपयोग करके DB से डिलीवर किया जाता है। यह उम्मीद से स्पष्ट है कि क्या हो रहा है:
{!! Form::select("categories[]",$categories,null,["class"=>"input-sm categories"]) !!}
दूसरी ड्रॉप डाउन JQuery के माध्यम से उत्पन्न होती है
$(".categories").on("change", function () {
var value = parseFloat($(this).val());
var $cat_products = $(".cat_products");
$.ajax({
type: "GET",
dataType:"json",
url: "category_prices/" + value,
success: function (categories) {
$.each(categories,function(i, product){
$cat_products.append("<option>" +product.product_name+"</option>" )
});
}
});
});
दूसरी ड्रॉप डाउन के लिए HTML:
<div class="form-group row">
<div class="col-sm-3 col-md-3"></div>
<div class="col-sm-2 col-md-2" >
<select class="cat_products">
</select>
</div>
</div>
उत्तर:
जवाब के लिए 0 № 1के साथ सूची साफ़ करें .empty() इससे पहले कि आप नए विकल्प जोड़ना शुरू करें:
$.ajax({ type: "GET",
dataType:"json",
url: "category_prices/" + value,
success: function (categories) {
$cat_products.empty();
$.each(categories,function(i, product){
$cat_products.append("<option>" +product.product_name+"</option>");
});
}
});
जवाब के लिए 0 № 2
ऐसा लगता है कि आप नई सामग्री को जोड़ने से पहले चुनिंदा तत्व की सामग्री को निकालने में सक्षम होना चाहिए। तो यह इस तरह दिखना चाहिए:
$(".categories").on("change", function () {
var value = parseFloat($(this).val());
var $cat_products = $(".cat_products");
// Remove the current options from the select element
$cat_products.html("");
$.ajax({
type: "GET",
dataType:"json",
url: "category_prices/" + value,
success: function (categories) {
$.each(categories,function(i, product){
$cat_products.append("<option>" +product.product_name+"</option>" )
});
}
});
});