Change value of Dropdown list with jquery with click event - javascript

I have a select option with the weekdays and a button, everytime I click on the button a new select option element is created, here is the code for it :
How can I make it that also when I click it loops through the weekdays e.g. first value is Monday, so when I click a new element is added and its value it Tuesday and so on ...
Thank you
$(document).ready(function() {
// gerHeightFromForm();
$("select").niceSelect();
$("#opening_hour_btn").click(function() {
var gethtml = $(
".opening_hour_wrapper .combo_wrap:first-child"
).html();
$(".opening_hour_wrapper").append(gethtml);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js" integrity="sha512-NqYds8su6jivy1/WLoW8x1tZMRD7/1ZfhWG/jcRQLOzV1k1rIODCpMgoBnar5QXshKJGV7vi0LXLNXPoFsM5Zg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/css/nice-select.css" integrity="sha512-uHuCigcmv3ByTqBQQEwngXWk7E/NaPYP+CFglpkXPnRQbSubJmEENgh+itRDYbWV0fUZmUz7fD/+JDdeQFD5+A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="opening_hour_block">
<h5 class="common_title top-title">Opening hours</h5>
<div class="opening_hour_wrapper">
<div class="combo_wrap">
<div class="combo_selecter">
<div class="day_select">
<select>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
<option value="Sunday">Sunday</option>
</select>
</div>
<div class="time_select_block">
<div class="time_selecter">
<span class="am-pm">AM</span>
<select>
<option value="01:00">01:00</option>
<option value="01:30">01:30</option>
<option value="02:00">02:00</option>
<option value="02:30">02:30</option>
<option value="03:00">03:00</option>
<option value="03:30">03:30</option>
<option value="04:00">04:00</option>
<option value="04:30">04:30</option>
<option value="05:00">05:00</option>
<option value="05:30">05:30</option>
<option value="06:00">06:00</option>
<option value="06:30">06:30</option>
<option value="07:00">07:00</option>
<option value="07:30">07:30</option>
<option value="08:00">08:00</option>
<option value="08:30">08:30</option>
<option value="09:00">09:00</option>
<option value="09:30">09:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
</select>
</div>
<div class="time_selecter">
<span class="am-pm">PM</span>
<select>
<option value="01:00">01:00</option>
<option value="01:30">01:30</option>
<option value="02:00">02:00</option>
<option value="02:30">02:30</option>
<option value="03:00">03:00</option>
<option value="03:30">03:30</option>
<option value="04:00">04:00</option>
<option value="04:30">04:30</option>
<option value="05:00">05:00</option>
<option value="05:30">05:30</option>
<option value="06:00">06:00</option>
<option value="06:30">06:30</option>
<option value="07:00">07:00</option>
<option value="07:30">07:30</option>
<option value="08:00">08:00</option>
<option value="08:30">08:30</option>
<option value="09:00">09:00</option>
<option value="09:30">09:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="add-more" id="opening_hour_btn">
<i class="fa fa-plus" aria-hidden="true"></i>
<span>Add opening hour</span>
</div>
</div>

Related

Blocking <select> when checbox is selected horizontally

I have a problem with carrying out a certain command.
After clicking on the checkbox, I want it to lock the fields horizontally.
I need the code to execute the command, after clicking on the "checkbox" it will block the hour checkbox.
I already tried If (), but it doesn't work as it should, locking me in all the fields, not just the ones I should. Can You help me?
$('body').on('change input', '.from-opening, .to-opening, .status-check', function() {
var licGroupObj = {};
licGroupObj = $('.license_group').map(function(idx, ele) {
var dayWeek = $(ele).find('.from-opening').data('days');
var hOpen = $(ele).find('.from-opening').val();
var hClosed = $(ele).find('.to-opening').val();
if ($(ele).find('.status-check:checked').val()) {
var status = 'closed';
} else {
var status = 'open';
}
return {
dayWeek,
hOpen,
hClosed,
status
};
}).get();
$('#opening_hours').val('');
$('#opening_hours').val(JSON.stringify(licGroupObj));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row license_group">
<label for="inputEmail3" class="col-sm-2 col-form-label">Poniedziałek</label>
<div class="col-sm-4">
<select name="openingHours" class="form-control from-opening" data-days="poniedziałek">
<option value="00:00">00:00</option>
<option value="00:30">00:30</option>
<option value="01:00">01:00</option>
<option value="01:30">01:30</option>
<option value="02:00">02:00</option>
<option value="03:30">03:30</option>
<option value="04:00">04:00</option>
<option value="04:30">04:30</option>
<option value="05:00">05:00</option>
<option value="05:30">05:30</option>
<option value="06:00">06:00</option>
<option value="06:30">06:30</option>
<option value="07:00">07:00</option>
<option value="07:30">07:30</option>
<option value="08:00">08:00</option>
<option value="08:30">08:30</option>
<option value="09:00">09:00</option>
<option value="09:30">09:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
<option value="18:30">18:30</option>
<option value="19:00">19:00</option>
<option value="19:30">19:30</option>
<option value="20:00">20:00</option>
<option value="20:30">20:30</option>
<option value="21:00">21:00</option>
<option value="21:30">21:30</option>
<option value="22:00">22:00</option>
<option value="22:30">22:30</option>
<option value="23:00">23:00</option>
<option value="23:30">23:30</option>
</select>
</div>
<div class="col-sm-4">
<select name="openinHours" class="form-control to-opening">
<option value="00:00">00:00</option>
<option value="00:30">00:30</option>
<option value="01:00">01:00</option>
<option value="01:30">01:30</option>
<option value="02:00">02:00</option>
<option value="03:30">03:30</option>
<option value="04:00">04:00</option>
<option value="04:30">04:30</option>
<option value="05:00">05:00</option>
<option value="05:30">05:30</option>
<option value="06:00">06:00</option>
<option value="06:30">06:30</option>
<option value="07:00">07:00</option>
<option value="07:30">07:30</option>
<option value="08:00">08:00</option>
<option value="08:30">08:30</option>
<option value="09:00">09:00</option>
<option value="09:30">09:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
<option value="18:30">18:30</option>
<option value="19:00">19:00</option>
<option value="19:30">19:30</option>
<option value="20:00">20:00</option>
<option value="20:30">20:30</option>
<option value="21:00">21:00</option>
<option value="21:30">21:30</option>
<option value="22:00">22:00</option>
<option value="22:30">22:30</option>
<option value="23:00">23:00</option>
<option value="23:30">23:30</option>
</select>
</div>
<div class="col-sm-2">
<div class="form-check">
<input class="form-check-input status-check" type="checkbox">
<label class="form-check-label" for="flexCheckChecked">
Zamknięte?
</label>
</div>
</div>
</div>
<div class="form-group row license_group">
<label for="inputEmail3" class="col-sm-2 col-form-label">Wtorek</label>
<div class="col-sm-4">
<select name="openinHours" class="form-control from-opening" data-days="wtorek">
<option value="00:00">00:00</option>
<option value="00:30">00:30</option>
<option value="01:00">01:00</option>
<option value="01:30">01:30</option>
<option value="02:00">02:00</option>
<option value="03:30">03:30</option>
<option value="04:00">04:00</option>
<option value="04:30">04:30</option>
<option value="05:00">05:00</option>
<option value="05:30">05:30</option>
<option value="06:00">06:00</option>
<option value="06:30">06:30</option>
<option value="07:00">07:00</option>
<option value="07:30">07:30</option>
<option value="08:00">08:00</option>
<option value="08:30">08:30</option>
<option value="09:00">09:00</option>
<option value="09:30">09:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
<option value="18:30">18:30</option>
<option value="19:00">19:00</option>
<option value="19:30">19:30</option>
<option value="20:00">20:00</option>
<option value="20:30">20:30</option>
<option value="21:00">21:00</option>
<option value="21:30">21:30</option>
<option value="22:00">22:00</option>
<option value="22:30">22:30</option>
<option value="23:00">23:00</option>
<option value="23:30">23:30</option>
</select>
</div>
<div class="col-sm-4">
<select name="openinHours" class="form-control to-opening">
<option value="00:00">00:00</option>
<option value="00:30">00:30</option>
<option value="01:00">01:00</option>
<option value="01:30">01:30</option>
<option value="02:00">02:00</option>
<option value="03:30">03:30</option>
<option value="04:00">04:00</option>
<option value="04:30">04:30</option>
<option value="05:00">05:00</option>
<option value="05:30">05:30</option>
<option value="06:00">06:00</option>
<option value="06:30">06:30</option>
<option value="07:00">07:00</option>
<option value="07:30">07:30</option>
<option value="08:00">08:00</option>
<option value="08:30">08:30</option>
<option value="09:00">09:00</option>
<option value="09:30">09:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
<option value="18:30">18:30</option>
<option value="19:00">19:00</option>
<option value="19:30">19:30</option>
<option value="20:00">20:00</option>
<option value="20:30">20:30</option>
<option value="21:00">21:00</option>
<option value="21:30">21:30</option>
<option value="22:00">22:00</option>
<option value="22:30">22:30</option>
<option value="23:00">23:00</option>
<option value="23:30">23:30</option>
</select>
</div>
<div class="col-sm-2">
<div class="form-check">
<input class="form-check-input status-check" type="checkbox">
<label class="form-check-label" for="flexCheckChecked">
Zamknięte?
</label>
</div>
</div>
</div>
</div>
<input type="hidden" name="opening_hours" id="opening_hours" value="">

There you go:
$('body').on('change input', '.from-opening, .to-opening, .status-check', function() {
var licGroupObj = {};
licGroupObj = $('.license_group').map(function(idx, ele) {
var dayWeek = $(ele).find('.from-opening').data('days'),
hOpen = $(ele).find('.from-opening').val(),
hClosed = $(ele).find('.to-opening').val(),
status = false
if(ele.querySelector('.status-check').checked) status = true
if(status) ele.querySelectorAll('select').forEach(e => e.disabled = true)
else ele.querySelectorAll('select').forEach(e => e.disabled = false)
console.log(
dayWeek,
hOpen,
hClosed,
status
)
return {
dayWeek,
hOpen,
hClosed,
status
};
}).get();
$('#opening_hours').val('');
$('#opening_hours').val(JSON.stringify(licGroupObj));
})
body {
display: flex;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="form-group row license_group">
<label for="inputEmail3" class="col-sm-2 col-form-label">Poniedziałek</label>
<div class="col-sm-4">
<select name="openingHours" class="form-control from-opening" data-days="poniedziałek">
<option value="00:00">00:00</option>
<option value="00:30">00:30</option>
<option value="01:00">01:00</option>
<option value="01:30">01:30</option>
<option value="02:00">02:00</option>
<option value="03:30">03:30</option>
<option value="04:00">04:00</option>
<option value="04:30">04:30</option>
<option value="05:00">05:00</option>
<option value="05:30">05:30</option>
<option value="06:00">06:00</option>
<option value="06:30">06:30</option>
<option value="07:00">07:00</option>
<option value="07:30">07:30</option>
<option value="08:00">08:00</option>
<option value="08:30">08:30</option>
<option value="09:00">09:00</option>
<option value="09:30">09:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
<option value="18:30">18:30</option>
<option value="19:00">19:00</option>
<option value="19:30">19:30</option>
<option value="20:00">20:00</option>
<option value="20:30">20:30</option>
<option value="21:00">21:00</option>
<option value="21:30">21:30</option>
<option value="22:00">22:00</option>
<option value="22:30">22:30</option>
<option value="23:00">23:00</option>
<option value="23:30">23:30</option>
</select>
</div>
<div class="col-sm-4">
<select name="openinHours" class="form-control to-opening">
<option value="00:00">00:00</option>
<option value="00:30">00:30</option>
<option value="01:00">01:00</option>
<option value="01:30">01:30</option>
<option value="02:00">02:00</option>
<option value="03:30">03:30</option>
<option value="04:00">04:00</option>
<option value="04:30">04:30</option>
<option value="05:00">05:00</option>
<option value="05:30">05:30</option>
<option value="06:00">06:00</option>
<option value="06:30">06:30</option>
<option value="07:00">07:00</option>
<option value="07:30">07:30</option>
<option value="08:00">08:00</option>
<option value="08:30">08:30</option>
<option value="09:00">09:00</option>
<option value="09:30">09:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
<option value="18:30">18:30</option>
<option value="19:00">19:00</option>
<option value="19:30">19:30</option>
<option value="20:00">20:00</option>
<option value="20:30">20:30</option>
<option value="21:00">21:00</option>
<option value="21:30">21:30</option>
<option value="22:00">22:00</option>
<option value="22:30">22:30</option>
<option value="23:00">23:00</option>
<option value="23:30">23:30</option>
</select>
</div>
<div class="col-sm-2">
<div class="form-check">
<input class="form-check-input status-check" type="checkbox">
<label class="form-check-label" for="flexCheckChecked">
Zamknięte?
</label>
</div>
</div>
</div>
<div class="form-group row license_group">
<label for="inputEmail3" class="col-sm-2 col-form-label">Wtorek</label>
<div class="col-sm-4">
<select name="openinHours" class="form-control from-opening" data-days="wtorek">
<option value="00:00">00:00</option>
<option value="00:30">00:30</option>
<option value="01:00">01:00</option>
<option value="01:30">01:30</option>
<option value="02:00">02:00</option>
<option value="03:30">03:30</option>
<option value="04:00">04:00</option>
<option value="04:30">04:30</option>
<option value="05:00">05:00</option>
<option value="05:30">05:30</option>
<option value="06:00">06:00</option>
<option value="06:30">06:30</option>
<option value="07:00">07:00</option>
<option value="07:30">07:30</option>
<option value="08:00">08:00</option>
<option value="08:30">08:30</option>
<option value="09:00">09:00</option>
<option value="09:30">09:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
<option value="18:30">18:30</option>
<option value="19:00">19:00</option>
<option value="19:30">19:30</option>
<option value="20:00">20:00</option>
<option value="20:30">20:30</option>
<option value="21:00">21:00</option>
<option value="21:30">21:30</option>
<option value="22:00">22:00</option>
<option value="22:30">22:30</option>
<option value="23:00">23:00</option>
<option value="23:30">23:30</option>
</select>
</div>
<div class="col-sm-4">
<select name="openinHours" class="form-control to-opening">
<option value="00:00">00:00</option>
<option value="00:30">00:30</option>
<option value="01:00">01:00</option>
<option value="01:30">01:30</option>
<option value="02:00">02:00</option>
<option value="03:30">03:30</option>
<option value="04:00">04:00</option>
<option value="04:30">04:30</option>
<option value="05:00">05:00</option>
<option value="05:30">05:30</option>
<option value="06:00">06:00</option>
<option value="06:30">06:30</option>
<option value="07:00">07:00</option>
<option value="07:30">07:30</option>
<option value="08:00">08:00</option>
<option value="08:30">08:30</option>
<option value="09:00">09:00</option>
<option value="09:30">09:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
<option value="18:30">18:30</option>
<option value="19:00">19:00</option>
<option value="19:30">19:30</option>
<option value="20:00">20:00</option>
<option value="20:30">20:30</option>
<option value="21:00">21:00</option>
<option value="21:30">21:30</option>
<option value="22:00">22:00</option>
<option value="22:30">22:30</option>
<option value="23:00">23:00</option>
<option value="23:30">23:30</option>
</select>
</div>
<div class="col-sm-2">
<div class="form-check">
<input class="form-check-input status-check" type="checkbox">
<label class="form-check-label" for="flexCheckChecked">
Zamknięte?
</label>
</div>
</div>
</div>
Used some pure js here, also added console log to you see the result and of course added flex to body to make better visibility.

Why are the 2 <select> elements that are being appended to my form not looking the same as the first 2 fixed in my Form?

I have an HTML form that gets company information.
In that form, I have 2 <select multiple> elements (one for company countries and one for sectors) on which I used JQuery and Bootstrap to give them a nice style and to allow the user to choose multiple options in an easier manner.
The Problem: When the user clicks "Add Company Button" to add a new company section to the form, the appended <select multiple> elements are not being styled the same way.
The difference isn't between the first two select fields, it is rather between the first 2 select fields and the pairs that get added when you click 'Add Company'. The first two are appearing how I want them (2 rectangular boxes in which the user clicks on multiple options from the dropdown), while the others are appearing like an unstyled dropdown where you have to press Ctrl+click on the options you want to select
Please note that I removed the CSS and other parts of the page to keep things simple. Also in the appended section, I removed some options to stay within the character limit of this post
The code:
$(document).ready(function() {
$(".mul-select").select2({
placeholder: "Select Company Sectors", //placeholder
tags: true,
tokenSeparators: ['/', ',', ';', " "]
});
})
$(document).ready(function() {
$(".mul-select.countries").select2({
placeholder: "Company's Country Locations", //placeholder
tags: true,
tokenSeparators: ['/', ',', ';', " "]
});
})
$(document).ready(function() {
$("body").on("click", ".add_new_frm_field_btn", function() {
var index = $(".company-info").find(".company-info-row").length + 1;
$(".company-info").append(`
<div class="added company-info-row" style="margin:5% 0 0 0;">
<div class="company-data" style="padding:1% 4%;">
<div>
<select name="addedCompany[${index}][sectors][]" id="accountSector_${index}" class="dropdown mul-select" multiple="" tabindex="-1" aria-hidden="true">
<option value="Advertising">Advertising</option>
<option value="Aerospace">Aerospace</option>
<option value="Agriculture">Agriculture</option>
</select>
</div>
<div>
<select name="addedCompany[${index}][countries][]" id="additionalAccountLocations_${index}" class="dropdown mul-select countries" multiple="true">
<option value="Afganistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
</select>
</div>
</div>
<div class="add_del_btn_outer_comp" style="margin:0 4% 0 4%;">
<button class="add_new_frm_field_btn">
<img src="add-icon.png" alt="Add Company Button">
</button>
<button class="remove_node_btn_frm_field" disabled>
<img src="remove-icon.png" alt="Remove Company Button">
</button>
</div>
</div>
</div>
`);
$(".company-info").find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false);
$(".company-info").find(".remove_node_btn_frm_field").first().prop("disabled", true);
});
});
$(document).ready(function() {
//===== delete the form feed row
$("body").on("click", ".remove_node_btn_frm_field", function() {
$(this).closest(".company-info-row").remove();
console.log("success");
});
});
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="login-box">
<div class="company-info">
<div class="company-info-row">
<div class="company-data" style="padding:1% 4%;">
<div>
<select name="company[sectors][]" id="accountSector" class="dropdown mul-select" multiple>
<option value="Advertising">Advertising</option>
<option value="Aerospace">Aerospace</option>
<option value="Agriculture">Agriculture</option>
<option value="Apparel & Accessories">Apparel & Accessories</option>
<option value="Architecture">Architecture</option>
<option value="Automotive">Automotive</option>
<option value="Banking">Banking</option>
<option value="Biotechnology">Biotechnology</option>
<option value="Building Materials & Equipment">Building Materials & Equipment</option>
<option value="Chemical">Chemical</option>
<option value="Computer">Computer</option>
<option value="Construction">Construction</option>
<option value="Consulting">Consulting</option>
<option value="Creative">Creative</option>
<option value="Culture">Culture</option>
<option value="Defense">Defense</option>
<option value="Education">Education</option>
<option value="Electric Power">Electric Power</option>
<option value="Electronics">Electronics</option>
<option value="Energy">Energy</option>
<option value="Entertainment & Leisure">Entertainment & Leisure</option>
<option value="Finance">Finance</option>
<option value="Food & Beverage">Food & Beverage</option>
<option value="Grocery">Grocery</option>
<option value="Healthcare">Healthcare</option>
<option value="Hospitality">Hospitality</option>
<option value="Insurance">Insurance</option>
<option value="Legal">Legal</option>
<option value="Manufacturing">Manufacturing</option>
<option value="Marketing">Marketing</option>
<option value="Mass Media">Mass Media</option>
<option value="Mining">Mining</option>
<option value="Music">Music</option>
<option value="Petroleum">Petroleum</option>
<option value="Publishing">Publishing</option>
<option value="Real Estate">Real Estate</option>
<option value="Retail">Retail</option>
<option value="Service">Service</option>
<option value="Shipping">Shipping</option>
<option value="Software">Software</option>
<option value="Sports">Sports</option>
<option value="Support">Support</option>
<option value="Technology">Technology</option>
<option value="Telecommunications">Telecommunications</option>
<option value="Television">Television</option>
<option value="Testing, Inspection & Certification">Testing, Inspection & Certification</option>
<option value="Transportation">Transportation</option>
<option value="Travel">Travel</option>
<option value="Venture Capital">Venture Capital</option>
<option value="Water">Water</option>
<option value="Wholesale">Wholesale</option>
</select>
</div>
<div>
<select name="company[countries][]" id="additionalAccountLocations" class="dropdown mul-select countries" multiple>
<option value="Afganistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antigua & Barbuda">Antigua & Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Aruba">Aruba</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Belize">Belize</option>
<option value="Benin">Benin</option>
<option value="Bermuda">Bermuda</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bonaire">Bonaire</option>
<option value="Bosnia & Herzegovina">Bosnia & Herzegovina</option>
<option value="Botswana">Botswana</option>
<option value="Brazil">Brazil</option>
<option value="British Indian Ocean Ter">British Indian Ocean Ter</option>
<option value="Brunei">Brunei</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Burundi">Burundi</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
<option value="Canada">Canada</option>
<option value="Canary Islands">Canary Islands</option>
<option value="Cape Verde">Cape Verde</option>
<option value="Cayman Islands">Cayman Islands</option>
<option value="Central African Republic">Central African Republic</option>
<option value="Chad">Chad</option>
<option value="Channel Islands">Channel Islands</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Christmas Island">Christmas Island</option>
<option value="Cocos Island">Cocos Island</option>
<option value="Colombia">Colombia</option>
<option value="Comoros">Comoros</option>
<option value="Congo">Congo</option>
<option value="Cook Islands">Cook Islands</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Cote DIvoire">Cote DIvoire</option>
<option value="Croatia">Croatia</option>
<option value="Cuba">Cuba</option>
<option value="Curaco">Curacao</option>
<option value="Cyprus">Cyprus</option>
<option value="Czech Republic">Czech Republic</option>
<option value="Denmark">Denmark</option>
<option value="Djibouti">Djibouti</option>
<option value="Dominica">Dominica</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="East Timor">East Timor</option>
<option value="Ecuador">Ecuador</option>
<option value="Egypt">Egypt</option>
<option value="El Salvador">El Salvador</option>
<option value="Equatorial Guinea">Equatorial Guinea</option>
<option value="Eritrea">Eritrea</option>
<option value="Estonia">Estonia</option>
<option value="Ethiopia">Ethiopia</option>
<option value="Falkland Islands">Falkland Islands</option>
<option value="Faroe Islands">Faroe Islands</option>
<option value="Fiji">Fiji</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="French Guiana">French Guiana</option>
<option value="French Polynesia">French Polynesia</option>
<option value="French Southern Ter">French Southern Ter</option>
<option value="Gabon">Gabon</option>
<option value="Gambia">Gambia</option>
<option value="Georgia">Georgia</option>
<option value="Germany">Germany</option>
<option value="Ghana">Ghana</option>
<option value="Gibraltar">Gibraltar</option>
<option value="Great Britain">Great Britain</option>
<option value="Greece">Greece</option>
<option value="Greenland">Greenland</option>
<option value="Grenada">Grenada</option>
<option value="Guadeloupe">Guadeloupe</option>
<option value="Guam">Guam</option>
<option value="Guatemala">Guatemala</option>
<option value="Guinea">Guinea</option>
<option value="Guyana">Guyana</option>
<option value="Haiti">Haiti</option>
<option value="Hawaii">Hawaii</option>
<option value="Honduras">Honduras</option>
<option value="Hong Kong">Hong Kong</option>
<option value="Hungary">Hungary</option>
<option value="Iceland">Iceland</option>
<option value="Indonesia">Indonesia</option>
<option value="India">India</option>
<option value="Iran">Iran</option>
<option value="Iraq">Iraq</option>
<option value="Ireland">Ireland</option>
<option value="Isle of Man">Isle of Man</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Jamaica">Jamaica</option>
<option value="Japan">Japan</option>
<option value="Jordan">Jordan</option>
<option value="Kazakhstan">Kazakhstan</option>
<option value="Kenya">Kenya</option>
<option value="Kiribati">Kiribati</option>
<option value="Korea North">Korea North</option>
<option value="Korea Sout">Korea South</option>
<option value="Kuwait">Kuwait</option>
<option value="Kyrgyzstan">Kyrgyzstan</option>
<option value="Laos">Laos</option>
<option value="Latvia">Latvia</option>
<option value="Lebanon">Lebanon</option>
<option value="Lesotho">Lesotho</option>
<option value="Liberia">Liberia</option>
<option value="Libya">Libya</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Macau">Macau</option>
<option value="Macedonia">Macedonia</option>
<option value="Madagascar">Madagascar</option>
<option value="Malaysia">Malaysia</option>
<option value="Malawi">Malawi</option>
<option value="Maldives">Maldives</option>
<option value="Mali">Mali</option>
<option value="Malta">Malta</option>
<option value="Marshall Islands">Marshall Islands</option>
<option value="Martinique">Martinique</option>
<option value="Mauritania">Mauritania</option>
<option value="Mauritius">Mauritius</option>
<option value="Mayotte">Mayotte</option>
<option value="Mexico">Mexico</option>
<option value="Midway Islands">Midway Islands</option>
<option value="Moldova">Moldova</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Montserrat">Montserrat</option>
<option value="Morocco">Morocco</option>
<option value="Mozambique">Mozambique</option>
<option value="Myanmar">Myanmar</option>
<option value="Nambia">Nambia</option>
<option value="Nauru">Nauru</option>
<option value="Nepal">Nepal</option>
<option value="Netherland Antilles">Netherland Antilles</option>
<option value="Netherlands">Netherlands (Holland, Europe)</option>
<option value="Nevis">Nevis</option>
<option value="New Caledonia">New Caledonia</option>
<option value="New Zealand">New Zealand</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Niger">Niger</option>
<option value="Nigeria">Nigeria</option>
<option value="Niue">Niue</option>
<option value="Norfolk Island">Norfolk Island</option>
<option value="Norway">Norway</option>
<option value="Oman">Oman</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau Island">Palau Island</option>
<option value="Palestine">Palestine</option>
<option value="Panama">Panama</option>
<option value="Papua New Guinea">Papua New Guinea</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Phillipines">Philippines</option>
<option value="Pitcairn Island">Pitcairn Island</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="Puerto Rico">Puerto Rico</option>
<option value="Qatar">Qatar</option>
<option value="Republic of Montenegro">Republic of Montenegro</option>
<option value="Republic of Serbia">Republic of Serbia</option>
<option value="Reunion">Reunion</option>
<option value="Romania">Romania</option>
<option value="Russia">Russia</option>
<option value="Rwanda">Rwanda</option>
<option value="St Barthelemy">St Barthelemy</option>
<option value="St Eustatius">St Eustatius</option>
<option value="St Helena">St Helena</option>
<option value="St Kitts-Nevis">St Kitts-Nevis</option>
<option value="St Lucia">St Lucia</option>
<option value="St Maarten">St Maarten</option>
<option value="St Pierre & Miquelon">St Pierre & Miquelon</option>
<option value="St Vincent & Grenadines">St Vincent & Grenadines</option>
<option value="Saipan">Saipan</option>
<option value="Samoa">Samoa</option>
<option value="Samoa American">Samoa American</option>
<option value="San Marino">San Marino</option>
<option value="Sao Tome & Principe">Sao Tome & Principe</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Senegal">Senegal</option>
<option value="Seychelles">Seychelles</option>
<option value="Sierra Leone">Sierra Leone</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia">Slovakia</option>
<option value="Slovenia">Slovenia</option>
<option value="Solomon Islands">Solomon Islands</option>
<option value="Somalia">Somalia</option>
<option value="South Africa">South Africa</option>
<option value="Spain">Spain</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Sudan">Sudan</option>
<option value="Suriname">Suriname</option>
<option value="Swaziland">Swaziland</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Syria">Syria</option>
<option value="Tahiti">Tahiti</option>
<option value="Taiwan">Taiwan</option>
<option value="Tajikistan">Tajikistan</option>
<option value="Tanzania">Tanzania</option>
<option value="Thailand">Thailand</option>
<option value="Togo">Togo</option>
<option value="Tokelau">Tokelau</option>
<option value="Tonga">Tonga</option>
<option value="Trinidad & Tobago">Trinidad & Tobago</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkey">Turkey</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Turks & Caicos Is">Turks & Caicos Is</option>
<option value="Tuvalu">Tuvalu</option>
<option value="Uganda">Uganda</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Erimates">United Arab Emirates</option>
<option value="United States of America">United States of America</option>
<option value="Uraguay">Uruguay</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Vatican City State">Vatican City State</option>
<option value="Venezuela">Venezuela</option>
<option value="Vietnam">Vietnam</option>
<option value="Virgin Islands (Brit)">Virgin Islands (Brit)</option>
<option value="Virgin Islands (USA)">Virgin Islands (USA)</option>
<option value="Wake Island">Wake Island</option>
<option value="Wallis & Futana Is">Wallis & Futana Is</option>
<option value="Yemen">Yemen</option>
<option value="Zaire">Zaire</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
</div>
</div>
<div class="add_del_btn_outer_comp" style="margin:0 4% 0 4%;">
<button class="add_new_frm_field_btn">
<img src="add-icon.png" alt="Add Company Button">
</button>
<button class="remove_node_btn_frm_field" disabled>
<img src="remove-icon.png" alt="Remove Company Button">
</button>
</div>
</div>
</div>
</div>
</body>
</html>
Any help in making them appear and function in the same way is highly appreciated. Thank you in advance!
My Fiddle: https://jsfiddle.net/30jwqfc5/

The first two select elements are instance of select2 and the later element is native html select. You need to instantiate select2 for the dynamically generated select elements after hitting the add company button, inside the click handler,
$('.mul-select').select2();
here is the fiddle https://jsfiddle.net/vpof3ab5/

Link State List Drop Down HTML to a specific page

I have added a drop down state list to my home page, which uses wordpress/elemntor.
When an item is selected from the dropdown list I would like to redirect the user to another URL. For example, when Georgia is selected I would like to redirect to this URL: https://www.everlastingopportunities.com/georgia/
How do I make the page go to the above URL when Georgia selected in drop down?
<select>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<!-- ... list continues ... -->
</select>

You can achieve it by passing the selected option to the javascript function and using it to redirect to the new url.
Ideal is to add a blank option on top, so that the person who wants Alabama as option makes a choice once.
I have made the script based on visible name as you showed in the question.
function my_function(event) {
var options = event.target.options;
var selected = options[options.selectedIndex].text;
window.location.href = 'https://www.everlastingopportunities.com/' + selected + '/';
}
<select onchange="my_function(event)">
<option value="">---</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<!-- ... list continues ... -->
</select>

You can easy do it with jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectCountry">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<!-- ... list continues ... -->
</select>
<script type="text/javascript">
$( document ).ready(function() {
$("#selectCountry").change(function(){
window.location.href = "https://www.everlastingopportunities.com/" + $("#selectCountry > option:selected").text() + "/";
});
});
</script>

Copy and past Code from post above for the full code and enter website links.
<select onchange="location = this.options[this.selectedIndex].value;">
<option>Please select</option>
<option value="everlastingopportunities.com/Alabama/">Alabama (AL)</option>
<option value="(ENTER WEBSITE LINK HERE)">Alaska (AK)</option>
<option value="(ENTERWEBSITE LINK HERE)">Arizona (AZ)</option>

<div class="col-md-4">
<label f`enter code here`or="inputState" class="form-label">State</label>
<select id="inputState" class="form-select">
<option selected>Choose...</option>
<option>
<!-- option -->
<option value="---">---</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="District of Columbia">District of Columbia</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Guam">Guam</option>
<option value="Hawaii">Hawaii</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="Nevada">Nevada</option>`enter code here`
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Northern Marianas Islands">Northern Marianas Islands</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Puerto Rico">Puerto Rico</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virginia">Virginia</option>
<option value="Virgin Islands">Virgin Islands</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
<!-- option -->
</option>
</select>
</div>

i need help i have problem with sub option problem how to fix?

after select bmw and select option m5 option. m5 is not showing how to fix this problem ?
i need select bmw and sub option m5 ?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".box").hide();
}
});
}).change();
});
</script>
<div>
<select>
<option value="">select brand</option>
<option value="2594">bmw</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="2594 box">
<select name="xfield[bmw]">
<option value="0">114</option>
<option value="1">116</option>
<option value="2">118</option>
<option value="3">120</option>
<option value="4">123</option>
<option value="5">125</option>
<option value="6">128</option>
<option value="7">130</option>
<option value="8">135</option>
<option value="9">214</option>
<option value="10">216</option>
<option value="11">218</option>
<option value="12">220</option>
<option value="13">225</option>
<option value="14">228</option>
<option value="15">315</option>
<option value="16">316</option>
<option value="17">318</option>
<option value="18">320</option>
<option value="19">320 GranTurismo</option>
<option value="20">323</option>
<option value="21">324</option>
<option value="22">325</option>
<option value="23">328</option>
<option value="24">330</option>
<option value="25">335</option>
<option value="26">418</option>
<option value="27">420</option>
<option value="28">425</option>
<option value="29">428</option>
<option value="30">430</option>
<option value="31">435</option>
<option value="32">518</option>
<option value="33">520</option>
<option value="34">523</option>
<option value="35">524</option>
<option value="36">525</option>
<option value="37">528</option>
<option value="38">530</option>
<option value="39">535</option>
<option value="40">540</option>
<option value="41">545</option>
<option value="42">550</option>
<option value="43">628</option>
<option value="44">630</option>
<option value="45">633</option>
<option value="46">635</option>
<option value="47">640</option>
<option value="48">645</option>
<option value="49">650</option>
<option value="50">725</option>
<option value="51">728</option>
<option value="52">730</option>
<option value="53">732</option>
<option value="54">735</option>
<option value="55">740</option>
<option value="56">745</option>
<option value="57">750</option>
<option value="58">760</option>
<option value="59">840</option>
<option value="60">850</option>
<option value="61">i3</option>
<option value="62">i8</option>
<option value="63">M1</option>
<option value="64">M135</option>
<option value="65">M235</option>
<option value="66">M3</option>
<option value="67">M4</option>
<option value="68">M5</option>
<option value="69">M550</option>
<option value="70">M6</option>
<option value="71">X1</option>
<option value="72">X3</option>
<option value="73">X4</option>
<option value="74">X5</option>
<option value="75">X6</option>
<option value="76">X6M</option>
<option value="77">Z1</option>
<option value="78">Z3</option>
<option value="79">Z4</option>
<option value="80">Z8</option>
</select>
</div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue option</strong> so i am here</div>

Your issue is because you are hiding the select in your .change function. The way you currently have it written, your .change is going to fire for every select on the page. That isn't what you want here based on your issue.
If you don't want to hide the second box you either need to assign and id or class to the first select or you could use the :first selector.
Example: This example shows with the :first selector.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select:first").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".box").hide();
}
});
}).change();
});
</script>
<div>
<select>
<option value="">select brand</option>
<option value="2594">bmw</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="2594 box">
<select name="xfield[bmw]">
<option value="0">114</option>
<option value="1">116</option>
<option value="2">118</option>
<option value="3">120</option>
<option value="4">123</option>
<option value="5">125</option>
<option value="6">128</option>
<option value="7">130</option>
<option value="8">135</option>
<option value="9">214</option>
<option value="10">216</option>
<option value="11">218</option>
<option value="12">220</option>
<option value="13">225</option>
<option value="14">228</option>
<option value="15">315</option>
<option value="16">316</option>
<option value="17">318</option>
<option value="18">320</option>
<option value="19">320 GranTurismo</option>
<option value="20">323</option>
<option value="21">324</option>
<option value="22">325</option>
<option value="23">328</option>
<option value="24">330</option>
<option value="25">335</option>
<option value="26">418</option>
<option value="27">420</option>
<option value="28">425</option>
<option value="29">428</option>
<option value="30">430</option>
<option value="31">435</option>
<option value="32">518</option>
<option value="33">520</option>
<option value="34">523</option>
<option value="35">524</option>
<option value="36">525</option>
<option value="37">528</option>
<option value="38">530</option>
<option value="39">535</option>
<option value="40">540</option>
<option value="41">545</option>
<option value="42">550</option>
<option value="43">628</option>
<option value="44">630</option>
<option value="45">633</option>
<option value="46">635</option>
<option value="47">640</option>
<option value="48">645</option>
<option value="49">650</option>
<option value="50">725</option>
<option value="51">728</option>
<option value="52">730</option>
<option value="53">732</option>
<option value="54">735</option>
<option value="55">740</option>
<option value="56">745</option>
<option value="57">750</option>
<option value="58">760</option>
<option value="59">840</option>
<option value="60">850</option>
<option value="61">i3</option>
<option value="62">i8</option>
<option value="63">M1</option>
<option value="64">M135</option>
<option value="65">M235</option>
<option value="66">M3</option>
<option value="67">M4</option>
<option value="68">M5</option>
<option value="69">M550</option>
<option value="70">M6</option>
<option value="71">X1</option>
<option value="72">X3</option>
<option value="73">X4</option>
<option value="74">X5</option>
<option value="75">X6</option>
<option value="76">X6M</option>
<option value="77">Z1</option>
<option value="78">Z3</option>
<option value="79">Z4</option>
<option value="80">Z8</option>
</select>
</div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue option</strong> so i am here</div>
Or you can assign an id/class to the select.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#typeSelect").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".box").hide();
}
});
}).change();
});
</script>
<div>
<select id="typeSelect">
<option value="">select brand</option>
<option value="2594">bmw</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="2594 box">
<select name="xfield[bmw]">
<option value="0">114</option>
<option value="1">116</option>
<option value="2">118</option>
<option value="3">120</option>
<option value="4">123</option>
<option value="5">125</option>
<option value="6">128</option>
<option value="7">130</option>
<option value="8">135</option>
<option value="9">214</option>
<option value="10">216</option>
<option value="11">218</option>
<option value="12">220</option>
<option value="13">225</option>
<option value="14">228</option>
<option value="15">315</option>
<option value="16">316</option>
<option value="17">318</option>
<option value="18">320</option>
<option value="19">320 GranTurismo</option>
<option value="20">323</option>
<option value="21">324</option>
<option value="22">325</option>
<option value="23">328</option>
<option value="24">330</option>
<option value="25">335</option>
<option value="26">418</option>
<option value="27">420</option>
<option value="28">425</option>
<option value="29">428</option>
<option value="30">430</option>
<option value="31">435</option>
<option value="32">518</option>
<option value="33">520</option>
<option value="34">523</option>
<option value="35">524</option>
<option value="36">525</option>
<option value="37">528</option>
<option value="38">530</option>
<option value="39">535</option>
<option value="40">540</option>
<option value="41">545</option>
<option value="42">550</option>
<option value="43">628</option>
<option value="44">630</option>
<option value="45">633</option>
<option value="46">635</option>
<option value="47">640</option>
<option value="48">645</option>
<option value="49">650</option>
<option value="50">725</option>
<option value="51">728</option>
<option value="52">730</option>
<option value="53">732</option>
<option value="54">735</option>
<option value="55">740</option>
<option value="56">745</option>
<option value="57">750</option>
<option value="58">760</option>
<option value="59">840</option>
<option value="60">850</option>
<option value="61">i3</option>
<option value="62">i8</option>
<option value="63">M1</option>
<option value="64">M135</option>
<option value="65">M235</option>
<option value="66">M3</option>
<option value="67">M4</option>
<option value="68">M5</option>
<option value="69">M550</option>
<option value="70">M6</option>
<option value="71">X1</option>
<option value="72">X3</option>
<option value="73">X4</option>
<option value="74">X5</option>
<option value="75">X6</option>
<option value="76">X6M</option>
<option value="77">Z1</option>
<option value="78">Z3</option>
<option value="79">Z4</option>
<option value="80">Z8</option>
</select>
</div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue option</strong> so i am here</div>
There are 20 ways to skin this cat, you just need to limit your $(select) scope a bit.

Prevent refresh when submitting form by POST

I'm trying to embed the following form on a page, and when people press submit, the form submits via POST and then the page scrolls down to the next slide.
However the CMS which the form is based on forces a redirect when the form is submitted, which obviously takes the user away from my page.
How can I prevent the form from redirecting? I assume I would have to prevent the submit via e.preventDefault(); and then manually write some javascript to post the form, but confused as to how to do that. So far all my attempts have just stopped the form from submitting altogether.
<form name="signup" class="bsd-signup-135" action="https://***" method="post" id="signup">
<div class="fieldset" id="bsd-field-country">
<div class="label"><label class="field">Country</label></div>
<div class="input">
<select id="country" name="country">
<option value=""></option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BR">Brazil</option>
<option value="VG">British Virgin Islands</option>
<option value="IO">British Indian Ocean Territory</option>
<option value="BN">Brunei</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="CV">Cape Verde</option>
<option value="KY">Cayman Islands</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CX">Christmas Island</option>
<option value="CO">Colombia</option>
<option value="KM">Comoros Islands</option>
<option value="CD">Congo, Democratic Republic of the</option>
<option value="CG">Congo, Republic of the</option>
<option value="CK">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="CI">Cote D'ivoire</option>
<option value="HR">Croatia</option>
<option value="CU">Cuba</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="DK">Denmark</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="TP">East Timor</option>
<option value="EC">Ecuador</option>
<option value="EG">Egypt</option>
<option value="SV">El Salvador</option>
<option value="GQ">Equatorial Guinea</option>
<option value="ER">Eritrea</option>
<option value="EE">Estonia</option>
<option value="ET">Ethiopia</option>
<option value="FK">Falkland Islands (Malvinas)</option>
<option value="FO">Faroe Islands</option>
<option value="FJ">Fiji</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="GF">French Guiana</option>
<option value="PF">French Polynesia</option>
<option value="TF">French Southern Territories</option>
<option value="GA">Gabon</option>
<option value="GM">Gambia</option>
<option value="GE">Georgia</option>
<option value="DE">Germany</option>
<option value="GH">Ghana</option>
<option value="GI">Gibraltar</option>
<option value="GR">Greece</option>
<option value="GL">Greenland</option>
<option value="GD">Grenada</option>
<option value="GP">Guadeloupe</option>
<option value="GU">Guam</option>
<option value="GT">Guatemala</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</option>
<option value="VA">Holy See (Vatican City State)</option>
<option value="HN">Honduras</option>
<option value="HK">Hong Kong</option>
<option value="HU">Hungary</option>
<option value="IS">Iceland</option>
<option value="IN">India</option>
<option value="ID">Indonesia</option>
<option value="IR">Iran</option>
<option value="IQ">Iraq</option>
<option value="IE">Republic of Ireland</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="JM">Jamaica</option>
<option value="JP">Japan</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KE">Kenya</option>
<option value="KI">Kiribati</option>
<option value="KR">South Korea</option>
<option value="XK">Kosovo</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LA">Laos</option>
<option value="LV">Latvia</option>
<option value="LB">Lebanon</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libya</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MO">Macau</option>
<option value="MK">Macedonia</option>
<option value="MG">Madagascar</option>
<option value="MW">Malawi</option>
<option value="MY">Malaysia</option>
<option value="MV">Maldives</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MH">Marshall Islands</option>
<option value="MQ">Martinique</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="YT">Mayotte</option>
<option value="MX">Mexico</option>
<option value="FM">Micronesia</option>
<option value="MD">Moldova, Republic of</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="ME">Montenegro</option>
<option value="MS">Montserrat</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="NL">Netherlands</option>
<option value="AN">Netherlands Antilles</option>
<option value="NC">New Caledonia</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NU">Niue</option>
<option value="NF">Norfolk Island</option>
<option value="MP">Northern Mariana Islands</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau</option>
<option value="PA">Panama</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
<option value="PE">Peru</option>
<option value="PH">Philippines</option>
<option value="PN">Pitcairn Island</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="PR">Puerto Rico</option>
<option value="QA">Qatar</option>
<option value="RE">Reunion</option>
<option value="RO">Romania</option>
<option value="RU">Russian Federation</option>
<option value="RW">Rwanda</option>
<option value="KN">Saint Kitts and Nevis</option>
<option value="LC">Saint Lucia</option>
<option value="VC">Saint Vincent and the Grenadines</option>
<option value="WS">Samoa</option>
<option value="SM">San Marino</option>
<option value="ST">Sao Tome and Principe</option>
<option value="SA">Saudi Arabia</option>
<option value="SN">Senegal</option>
<option value="RS">Serbia</option>
<option value="SC">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SG">Singapore</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="SB">Solomon Islands</option>
<option value="SO">Somalia</option>
<option value="ZA">South Africa</option>
<option value="SS">South Sudan</option>
<option value="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SH">St. Helena</option>
<option value="PM">St. Pierre and Miquelon</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</option>
<option value="SY">Syria</option>
<option value="SZ">Swaziland</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="TW">Taiwan</option>
<option value="TJ">Tajikistan</option>
<option value="TZ">Tanzania</option>
<option value="TH">Thailand</option>
<option value="TG">Togo</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad and Tobago</option>
<option value="TN">Tunisia</option>
<option value="TR">Turkey</option>
<option value="TM">Turkmenistan</option>
<option value="TC">Turks and Caicos Islands</option>
<option value="TV">Tuvalu</option>
<option value="UG">Uganda</option>
<option value="UA">Ukraine</option>
<option value="AE">United Arab Emirates</option>
<option value="GB" selected="selected">United Kingdom</option>
<option value="US">United States</option>
<option value="UY">Uruguay</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VE">Venezuela</option>
<option value="VN">Viet Nam</option>
<option value="VI">Virgin Islands (U.S.)</option>
<option value="WF">Wallis and Futuna Islands</option>
<option value="EH">Western Sahara</option>
<option value="YE">Yemen</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
</div>
</div>
<div class="fieldset" id="bsd-field-email">
<div class="label"><label class="field">Email</label></div>
<div class="input"><input type="email" class="text" size="48" id="email" name="email"></div>
</div>
<div class="fieldset" id="bsd-field-firstname">
<div class="label"><label class="field">First Name</label></div>
<div class="input"><input size="16" id="firstname" name="firstname" type="text"></div>
</div>
<div class="fieldset" id="bsd-field-lastname">
<div class="label"><label class="field">Last Name</label></div>
<div class="input"><input size="25" id="lastname" name="lastname" type="text"></div>
</div>
<div class="fieldset" id="bsd-field-custom-1963-group">
<div class="label"><label class="field">Radio buttons:</label></div>
<div class="input"> <input id="custom-1963_0" class="custom-1963" name="custom-1963" value="1" type="radio"><label for="custom-1963_0">Option 1</label> <input id="custom-1963_1" class="custom-1963" name="custom-1963" value="2" type="radio"><label for="custom-1963_1">Option 2</label> <input id="custom-1963_2" class="custom-1963" name="custom-1963" value="3" type="radio"><label for="custom-1963_2">Option 3</label> </div>
</div>
<div class="fieldset" id="bsd-field-email_opt_in">
<div class="label"><label class="field"></label></div>
<div class="input"><input id="email_opt_in" name="email_opt_in" type="checkbox" value="1"><label for="email_opt_in">Would you like to receive updates about our news, campaigns and appeals by email?</label></div>
</div>
<div class="fieldset" id="bsd-field-submit-btn">
<div class="label"><label class="field"></label></div>
<div class="input"><input name="submit-btn" value="Sign the petition" type="submit" id="submit_button"></div>
</div>
</form>
I got this far with the javascript, but was unsure of how to post whether a field is checked or not, or how to post radios (especially radios with a hyphen in their name/ID, which I cannot change due to CMS.
$("#signup").submit(function(event) {
event.preventDefault();
var $form = $(this),
url = $form.attr("action");
var posting = $.post(url, {
country: $("#country").val(),
email: $("#email").val(),
firstname: $("#firstname").val(),
lastname: $("#lastname").val()
});
posting.done(function(data) {
alert("Success!");
});
});

Categories

Resources