I would like to dynamically change the options of a HTML dropdown menu based on which customer address city a user selects - for example, I have a JSON data.
addObj
Array(4)
0: {addressee: 'Customer2', country: 'US', state: 'NH', zip: '03103', city: 'Bedford', …}
1: {addressee: 'NB Demo Customer', country: 'US', state: 'MA', zip: '01432', city: 'Devens', …}
2: {addressee: 'Customer1', country: 'US', state: 'MA', zip: '01730', city: 'Bedford', …}
3: {addressee: 'Nb Demo check', country: 'US', state: 'MA', zip: '01748', city: 'Hopkinton', …}
length: 4
[[Prototype]]: Array(0)
and I have image drop down menu. image 1:
So, here first word before delivery are city names.
another image selecting customer addresses : image 2:
if the user select any of customer1,customer2,nb demo customer then based on city and state I need to compare and append that particular dropdown in select shipping method.
Likewise, eg: city : Bedford, state : MA then shipping method dropdown should be Beford MA delivery.
I am stuck with a function similar to this one (I am new to web dev and an largely unfamiliar with javascript,Jquery and its syntax):
if (activeAddObj) {
debugger;
if (activeAddObj.city) {
filtered = _.filter(setup.shipping, function(data) {
return data.name === activeAddObj.city + ' ' + 'Delivery';
});
shippingmethod = filtered[0].name;
shippingmethodId = filtered[0].internalId;
console.log('shippingmethod', shippingmethod);
console.log('shippingmethodId', shippingmethodId);
$("#delivery-method-check").prop("checked", true);
$(".delivery-method-container").show();
var delivery = jQuery("#shipping-method");
console.log('delivery', delivery);
var html = "";
if (delivery.html().trim().length <= 0) {
delivery.append($("<option />").val(shippingmethodId).text(shippingmethod));
}
jQuery("#shipping-method").append(html);
}
}
activeAddObj is
address1: "9955"
address2: "9955"
addressee: "NB Demo Customer"
addrsid: "89242"
city: "Devens"
internalid: "89263"
phone: "(987) 987-9870"
state: "MA"
zip: "01432"
[[Prototype]]: Object
setup.shipping is
<div class="shipping-addr-container">
<div class="shipping-addr-div">
<label for="" class="shipping-addr-head"> Ship To</label>
<span class="ship-to-checkbox">
<input type="checkbox" id="ship-to-check" value="" name="update" class="switch_1">
<span class="switch-after"></span>
</span>
<div class="addr-main-container" style="display: none;">
<div class="addr-container">
</div>
</div>
</div>
</div>
<div class="delivery-method-main-container">
<div class="delivery-method-div">
<label for="" class="delivery-method-head">Shipping Method:</label>
<span class="ship-to-checkbox">
<input type="checkbox" id="delivery-method-check" value="" name="update" class="switch_1">
<span class="switch-after"></span>
</span>
<div class="delivery-method-container" style="display: none;">
<div class="select-delivery-method">
<label>Select Shipping method:</label>
<select class="form-control" id="shipping-method">
</select>
</div>
</div>
</div>
</div>
my conclusion is whatever we select any customer address(image 2) based on that city and state we need to compare and select and show dropdown automatically. Please advice me in programming.