JQuery is my best friend in good and bad Javascript times. However, some times it takes some figuring out for me before I finally achieve my goal. This is one of these days. This they I bumped into a certain issue I can't really find my way around. I'll try explaining it below.
My HTML
<select name="one" id="one">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
....
</select>
<select name="two" id="two">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
....
</select>
<select name="three" id="three">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
....
</select>
My JQuery
$(document).ready(function() {
if (one != 0) {
// Set select dropdown one
}
if (two != 0) {
// Set select dropdown two
}
if (three != 0) {
// Set select dropdown three
}
});
$(document).on('change', '#three', function() {
var item = $(this).val();
var url = basePath + 'item/' + item;
window.location = url;
});
PHP
<script type="text/javascript">
var one = <?= $one; ?>;
var two = <?= $two; ?>;
var two = <?= $three; ?>;
</script>
The issue
What I want to achieve is that when an option is selected in dropdown one, JQuery loads dropdown two. When an option is selected in dropdown two, JQuery loads dropdown three.
I've got this working. However, when dropdown three is selected, it does a refresh. But as soon as that refresh is done, all select values would be set again and another refresh would be triggered.
I want JQuery to only refresh the first time, set all select values after the refresh (thus triggering the change event on the select dropdowns and loading the values) but not refreshing when the third select dropdown value is set.
If I need to do more explaining on this please let me know. Any suggestions and help would be very welcome.
Progress
if (false !== rootpfgroup && false !== hoofdpfgroup && false !== subpfgroup) {
$('#one').val(rootpfgroup).trigger('change');
$('#two').val(hoofdpfgroup).trigger('change');
$('#three').val(subpfgroup);
}
I've found the following to be working. However, it only sets the first dropdown. Selecting a value in the first dropdown triggers an ajax call that loads the options for the second one. Selecting an option in the second drop down triggers an ajax call that loads the options for the third one. Can somebody tell me more on how to go about this and what I'm doing wrong? Thanks in advance.
As per my comment above, setting the selected dropdown value using PHP to set the HTML selected attribute would also work, eliminating your refresh problem and meaning that the value persistence works without JS (whether you care about that is a different matter):
<?php
$one = '';
$two = '';
$three = '';
if (!empty($_POST['one'])) {
$one = $_POST['one'];
}
if (!empty($_POST['two'])) {
$two = $_POST['two'];
}
if (!empty($_POST['three'])) {
$three = $_POST['three'];
}
?>
$(document).on('change', '#three', function() {
var form = $('#form');
var item = $(this).val();
var url = basePath + 'item/' + item;
form.attr('action', url);
form.submit();
});
<form action="" method="POST" id="form">
<select name="one" id="one">
<option value="1" <?php if ($one == 1):?>selected<?php endif;?>>One</option>
<option value="2" <?php if ($one == 2):?>selected<?php endif;?>>Two</option>
<option value="3" <?php if ($one == 3):?>selected<?php endif;?>>Three</option>
</select>
<select name="two" id="two">
<option value="1" <?php if ($two == 1):?>selected<?php endif;?>>One</option>
<option value="2" <?php if ($two == 2):?>selected<?php endif;?>>Two</option>
<option value="3" <?php if ($two == 3):?>selected<?php endif;?>>Three</option>
</select>
<select name="three" id="three">
<option value="1" <?php if ($three == 1):?>selected<?php endif;?>>One</option>
<option value="2" <?php if ($three == 2):?>selected<?php endif;?>>Two</option>
<option value="3" <?php if ($three == 3):?>selected<?php endif;?>>Three</option>
</select>
</form>
As I mentioned, depending on what your data actually looks like (assuming it isn't just lists of numbers ;) you might be able to add some loops in your PHP to avoid repetition.
<?php
$one = '';
$two = '';
$three = '';
if (!empty($_POST['one'])) {
$one = $_POST['one'];
}
if (!empty($_POST['two'])) {
$two = $_POST['two'];
}
if (!empty($_POST['three'])) {
$three = $_POST['three'];
}
?>
$(document).ready(function() {
var one = '<?= $one; ?>';
var two = '<?= $two; ?>';
var three = '<?= $three; ?>';
if (one != '') {
$('#one').val(one);
}
if (two != '') {
$('#two').val(two);
}
if (three != '') {
$('#three').val(three);
}
});
$(document).on('change', '#three', function() {
var form = $('#form');
var item = $(this).val();
var url = basePath + 'item/' + item;
form.attr('action', url);
form.submit();
});
<form action="" method="POST" id="form">
<select name="one" id="one">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select name="two" id="two">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select name="three" id="three">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</form>
This should now set the values as intended.
Related
My cascading dropdown works fine, exactly how I want it to on a desktop device, however on mobile, the second option of the dropdown lets me choose any option, even those only meant for a different first dropdown input. Is there any way to fix this? I included a picture of what I am talking about and a link to my code.
html
<select name="category" id='dropdown1'>
<option value="0" rel='start'>Select Model</option>
<option value="1" rel="GFS">GFS</option>
<option value="2" rel="NAM">NAM</option>
</select>
<select name="items" class="cascade", id="imgList" style='display:none'>
<option value="" class='NAM'>Please select a timeframe</option>
<option value="" class='GFS'>Please select a timeframe</option>
<option value='.png' class="GFS">1-Day</option>
<option value='.png' class="GFS">5-Days</option>
<option value='.png' class="NAM">1-Day</option>
</select>
js
$('#dropdown1').change(function() {
$('#imgList').css('display','block');
});
$(document).ready(function(){
var $cat = $('select[name=category]'),
$category = $('select[name=items]');
$cat.change(function(){
var $this = $(this).find(':selected'),
rel = $this.attr('rel');
// Hide all
$category.find("option").hide();
// Find all matching accessories
// Show all the correct accesories
// Select the first accesory
$set = $category.find('option.' + rel);
$set.show().first().prop('selected', true);
});
});
function setClass() {
var img = document.getElementById("image");
img.src = this.value;
return false;
}
document.getElementById("imgList").onchange = setClass;
https://jsfiddle.net/7t5rLa3h/
Looks like hiding the option (display:none) on mobile browsers doesn't work. But you can disable and enable them like options.attr('disable', true).
Alternatively, you can save a set of options in a variable and filter and re-populate the select later.
$(document).ready(function() {
var $cat = $('select[name=category]'),
$category = $('select[name=items]'),
$options = $('select[name=items] option');
$cat.change(function() {
var $this = $(this).find(':selected'),
rel = $this.attr('rel'),
$set = $options.filter('[data-category=' + rel + ']');
$category.html($set)
$set.show().first().prop('selected', true);
});
});
$('#dropdown1').change(function() {
$('#imgList').css('display', 'block');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Choose Model and Timeframe</h1>
<h2>
<select name="category" id='dropdown1'>
<option value="0" rel='start'>Select Model</option>
<option value="1" rel="GFS">GFS</option>
<option value="2" rel="NAM">NAM</option>
</select>
<select name="items" class="cascade", id="imgList" style='display:none'>
<option value="" data-category='NAM'>Please select a timeframe</option>
<option value="" data-category='GFS'>Please select a timeframe</option>
<option value='Model_Data/GFS/meteogram/trends/images/NYC/gfs_1day_temp.png' data-category="GFS">1-Day</option>
<option value='Model_Data/GFS/meteogram/trends/images/NYC/gfs_5day_temp.png' data-category="GFS">5-Days</option>
<option value='Model_Data/NAM/meteogram/images/1_day/NYC/nam_1day_temp.png' data-category="NAM">1-Day</option>
I'm trying to make subcategory required only upon PDF option selected from the category select.
I have tried this JavaScript but its not working.
function getVal(ele){
var element = document.getElementById("category")
ele.value == "pdf" ? element.required =true : element.required =false
}
getVal(document.getElementById("subcat"))
<select id="category" name="category" required>
<option value="">select category</option>
<option>doc</option>
<option value="pdf">pdf</option>
<option>gifs</option>
</select>
<select id="subcat" name="subcat">
<option value="">select type</option>
<option>normal pdf</option>
<option>other pdf</option>
</select>
But its not working, what am I doing wrong?
using jQuery:
var $category = $("#category")
var $subcat = $("#subcat")
$category.on('change', function() {
$subcat.prop('required', $(this).val() === "pdf")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="category" name="category" required>
<option value="">select category</option>
<option>doc</option>
<option value="pdf">pdf</option>
<option>gifs</option>
</select>
<select id="subcat" name="subcat">
<option value="">select type</option>
<option>normal pdf</option>
<option>other pdf</option>
</select>
With pure JS:
var $category = document.querySelector("#category")
var $subcat = document.querySelector("#subcat")
$category.addEventListener('change', function() {
$subcat.required = this.value === "pdf"
})
This runs before the user selected something from the menu.
Adding a change event listener to the select will do it.
Also, you're mixing up ele and element.
function getVal(ele) {
ele.addEventListener('change', function() {
var element = document.getElementById("category")
element.value == "pdf" ? ele.required = true : ele.required = false
})
}
getVal(document.getElementById("subcat"))
I have 4 dropdowns from which you have to select an option.
What I am trying to do is show an alert if you chose the same option more than once. Its purpose is to keep the score for a game so a person shouldn't be able to play as 2.
At the moment the dropdown looks like this:
<select id="users_1" aria-labelledby="dropdownMenu1">
<option>Select player</option>
<?php foreach($users as $user) : ?>
<option value="<?=$user['id_user']?>"><?=$user['nume']?></option>
<?php endforeach; ?>
</select>
And what I've tried to do in JQuery is this:
$("#users_2").change(function() {
var a=$(this).val("#users_1");
var b=$(this).val("#users_2");
if(a == b) {
alert($(this).val());
}
});
And I also tried to compare them like this:
$("#users_2").change(function() {
if($(this).val() == $("#users_1").val()) {
alert($(this).val());
}
});
None seems to work and I have no clue why. I've checked and the actual values are taken from the view but the if clause cannot compare them apparently.
Thank you for any help! Much appreciated!
Get your values, don't set them
Change this…
$("#users_2").change(function() {
var a=$(this).val("#users_1");
var b=$(this).val("#users_2");
if(a == b) {
alert($(this).val());
}
});
…to this…
$("#users_2").change(function() {
var a = $("#users_1").val();
var b = $(this).val(); // equivalent to $("#users_2").val()
if(a === b) { // Use strict comparison operator as a best practice
alert(a + ' matches ' + b);
}
});
Make it dynamic
You can take it a step farther by listening to a set of elements and making your handler dynamic:
// Listen to set of all select elements.
$('select').on('change', function(e) {
// Serialize form values.
var vals = $('#select_player').serializeArray();
// Convert to simple array of just values.
vals = $.map(vals, function (val, i) {
return val.value;
});
// Remove current selection from array…
vals.splice(vals.indexOf($(this).val()), 1);
// …then check to see if it's value was already there.
if(vals.indexOf($(this).val()) !== -1) { // If value is found,
// …reset current select element to default option,
$(this).val('default');
// …and alert user with a relevant message.
alert('You cannot select this player more than once.');
};
});
label {
display: block;
margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="select_player" name="select_player">
<label>Player 1:
<select id="users_1" name="users_1">
<option value="default" selected="selected" disabled>Select player</option>
<option value="uid001">John Doe</option>
<option value="uid002">Jane Doe</option>
<option value="uid003">Jerome Smith</option>
<option value="uid004">Janet O'Public</option>
</select>
</label>
<label>Player 2:
<select id="users_2" name="users_2">
<option value="default" selected="selected" disabled>Select player</option>
<option value="uid001">John Doe</option>
<option value="uid002">Jane Doe</option>
<option value="uid003">Jerome Smith</option>
<option value="uid004">Janet O'Public</option>
</select>
</label>
<label>Player 3:
<select id="users_3" name="users_3">
<option value="default" selected="selected" disabled>Select player</option>
<option value="uid001">John Doe</option>
<option value="uid002">Jane Doe</option>
<option value="uid003">Jerome Smith</option>
<option value="uid004">Janet O'Public</option>
</select>
</label>
<label>Player 4:
<select id="users_4" name="users_4">
<option value="default" selected="selected" disabled>Select player</option>
<option value="uid001">John Doe</option>
<option value="uid002">Jane Doe</option>
<option value="uid003">Jerome Smith</option>
<option value="uid004">Janet O'Public</option>
</select>
</label>
</form>
I used the same class on all the dropdowns and then use only one event handler.
$('.dropdown').on('change', function (event) {
var selectedValue = $(event.currentTarget).val();
var matchedDropdowns = $('.dropdown').filter(function (index) {
return $(this).val() === selectedValue;
});
if (matchedDropdowns.length > 1) {
alert("Alert Alert!")
}
})
In the event handlers I can get the selected value, filter all the dropdowns that match that value and if I get more than 1 dropdown I will just show the alert.
You can check it on fiddle.
I have two (or in some places more) dropdowns (select) with several options. There is also a button for clearing all selected values in dropdowns. There is one aspect of this clearing button that does not working properly for my needs.
The button is displayed only if dropdowns has selected option with value, after is selected options with empty value, button is hidden. After i choose some option in both dropdowns (button displayed) and then change value in one from this dropdowns to option without value (button is hidden). Problem is, that button is hidden after one from dropdowns has empty value.
I need that button to be hidden only if all dropdowns have a selected option with an empty value. This jsfiddle illustrates what I mean.
I use select2.js for the dropdowns.
HTML:
<input type="button" class="opt-clear" value="Clear all dropdowns">
<div class="option">
<select>
<option value="">Please select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
<div class="option">
<select>
<option value="">Please select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
Javascript:
$('select').select2();
$('.option select').change(function() {
var id=$(this).val();
if (id=="") {
$(".opt-clear").hide();
} else {
$(".opt-clear").show();
}
}).trigger('change');
$(".opt-clear").click(function() { $(".option select").select2("val", ""); });
You have to check the val from all lists. If at least one them has a value then dont hide the button. You have to use each() and a var as a flag.
Try:
$('.option select').change(function () {
var flag = 1;
$(".option select").each(function (index) {
var id = $(this).val();
if (id != "") {
flag = 0;
}
});
if (flag) {
$(".opt-clear").hide();
} else {
$(".opt-clear").show();
}
}).trigger('change');
DEMO
Use this code your problem will be solved:
HTML Code :
<input type="button" id="btnChangeddValue" onclick="ddChangeValue();" style="display: none;"
class="opt-clear" value="Clear all dropdowns">
<div class="option">
<select id="dd1" onchange="ddChange(this.value);">
<option value="">Please select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
<div class="option">
<select id="dd2" onchange="ddChange(this.value);">
<option value="">Please select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
Js Script :
function ddChange(ddValue) {
if (ddValue != "" && ddValue != null) {
// $('#btnChangeddValue').css({ 'display': 'block' });
document.getElementById('btnChangeddValue').style.display = 'block';
}
else {
document.getElementById('btnChangeddValue').style.display = 'none';
}
}
function ddChangeValue() {
document.getElementById('dd1').value = "";
document.getElementById('dd2').value = "";
document.getElementById('btnChangeddValue').style.display = 'none';
}
Reguards,
Hardik Patel
hi I would try to get all the select with value. if their count is greater than 0 than button should be displayed. you can achieve that with jquery filter funstion
if ( $('.option select').filter(function(0 { return $(this).val != ''; }).length > 0){
//show button
}
else{
//hide button
}
Updated your fiddle.
$('.option select').change(function() {
checkvalue();
if(flag){
$('input').show();
}else{
$('input').hide();
}
}).trigger('change');
function checkvalue(){
$('.option select').each(function(){
if ($(this).val()!="") {
flag = true;
}else{
flag = false;
}
});
}
Your DOM has multiple select tags. So your code did not work.
I have 2 different SELECT OPTION in a form.
The first one is Source, the second one is Status. I would like to have different OPTIONS in my Status drop-down list depending on the OPTION selected in my Source drop-down.
Source:
<select id="source" name="source">
<option>MANUAL</option>
<option>ONLINE</option>
</select>
Status:
<select id="status" name="status">
</select>
Options:
- If Source is MANUAL, then Status is OPEN or DELIVERED
- If Source is ONLINE, then Status is OPEN or DELIVERED or SHIPPED
My non-working attempt:
<script>
$(document).ready(function () {
var option = document.getElementById("status").options;
if (document.getElementById('source').value == "MANUAL") {
$("#status").append('<option>OPEN</option>');
$("#status").append('<option>DELIVERED</option>');
}
if (document.getElementById('source').value == "ONLINE") {
$("#status").append('<option>OPEN</option>');
$("#status").append('<option>DELIVERED</option>');
$("#status").append('<option>SHIPPED</option>');
}
});
</script>
Try something like this... jsfiddle demo
HTML
<!-- Source: -->
<select id="source" name="source">
<option>MANUAL</option>
<option>ONLINE</option>
</select>
<!-- Status: -->
<select id="status" name="status">
<option>OPEN</option>
<option>DELIVERED</option>
</select>
JS
$(document).on('ready', function () {
$("#source").on('change', function () {
var el = $(this);
if (el.val() === "ONLINE") {
$("#status").append("<option>SHIPPED</option>");
} else if (el.val() === "MANUAL") {
$("#status option:last-child").remove();
}
});
});
I am posting this answer because in this way you will never need any plugin like jQuery and any other, This has the solution by simple javascript.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript">
function dynamicdropdown(listindex)
{
switch (listindex)
{
case "manual" :
document.getElementById("status").options[0]=new Option("Select status","");
document.getElementById("status").options[1]=new Option("OPEN","open");
document.getElementById("status").options[2]=new Option("DELIVERED","delivered");
break;
case "online" :
document.getElementById("status").options[0]=new Option("Select status","");
document.getElementById("status").options[1]=new Option("OPEN","open");
document.getElementById("status").options[2]=new Option("DELIVERED","delivered");
document.getElementById("status").options[3]=new Option("SHIPPED","shipped");
break;
}
return true;
}
</script>
</head>
<title>Dynamic Drop Down List</title>
<body>
<div class="category_div" id="category_div">Source:
<select id="source" name="source" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
<option value="">Select source</option>
<option value="manual">MANUAL</option>
<option value="online">ONLINE</option>
</select>
</div>
<div class="sub_category_div" id="sub_category_div">Status:
<script type="text/javascript" language="JavaScript">
document.write('<select name="status" id="status"><option value="">Select status</option></select>')
</script>
<noscript>
<select id="status" name="status">
<option value="open">OPEN</option>
<option value="delivered">DELIVERED</option>
</select>
</noscript>
</div>
</body>
</html>
For more details, I mean to make dynamic and more dependency please take a look at my article create dynamic drop-down list
function dropdownlist(listindex)
{
document.getElementById("ddlCity").options.length = 0;
switch (listindex)
{
case "Karnataka":
document.getElementById("ddlCity").options[0] = new Option("--select--", "");
document.getElementById("ddlCity").options[1] = new Option("Dharawad", "Dharawad");
document.getElementById("ddlCity").options[2] = new Option("Haveri", "Haveri");
document.getElementById("ddlCity").options[3] = new Option("Belgum", "Belgum");
document.getElementById("ddlCity").options[4] = new Option("Bijapur", "Bijapur");
break;
case "Tamilnadu":
document.getElementById("ddlCity").options[0] = new Option("--select--", "");
document.getElementById("ddlCity").options[1] = new Option("dgdf", "dgdf");
document.getElementById("ddlCity").options[2] = new Option("gffd", "gffd");
break;
}
}
*
State:
--Select--
Karnataka
Tamilnadu
Andra pradesh
Telngana
<div>
<p>
<label id="lblCt">
<span class="red">*</span>
City:</label>
<select id="ddlCity">
<!-- <option>--Select--</option>
<option value="1">Dharawad</option>
<option value="2">Belgum</option>
<option value="3">Bagalkot</option>
<option value="4">Haveri</option>
<option>Hydrabadh</option>
<option>Vijat vada</option>-->
</select>
<label id="lblCity"></label>
</p>
</div>
In this jsfiddle you'll find a solution I deviced. The idea is to have a selector pair in html and use (plain) javascript to filter the options in the dependent selector, based on the selected option of the first. For example:
<select id="continents">
<option value = 0>All</option>
<option value = 1>Asia</option>
<option value = 2>Europe</option>
<option value = 3>Africa</option>
</select>
<select id="selectcountries"></select>
Uses (in the jsFiddle)
MAIN.createRelatedSelector
( document.querySelector('#continents') // from select element
,document.querySelector('#selectcountries') // to select element
,{ // values object
Asia: ['China','Japan','North Korea',
'South Korea','India','Malaysia',
'Uzbekistan'],
Europe: ['France','Belgium','Spain','Netherlands','Sweden','Germany'],
Africa: ['Mali','Namibia','Botswana','Zimbabwe','Burkina Faso','Burundi']
}
,function(a,b){return a>b ? 1 : a<b ? -1 : 0;} // sort method
);
[Edit 2021] or use data-attributes, something like:
document.addEventListener("change", checkSelect);
function checkSelect(evt) {
const origin = evt.target;
if (origin.dataset.dependentSelector) {
const selectedOptFrom = origin.querySelector("option:checked")
.dataset.dependentOpt || "n/a";
const addRemove = optData => (optData || "") === selectedOptFrom
? "add" : "remove";
document.querySelectorAll(`${origin.dataset.dependentSelector} option`)
.forEach( opt =>
opt.classList[addRemove(opt.dataset.fromDependent)]("display") );
}
}
[data-from-dependent] {
display: none;
}
[data-from-dependent].display {
display: initial;
}
<select id="source" name="source" data-dependent-selector="#status">
<option>MANUAL</option>
<option data-dependent-opt="ONLINE">ONLINE</option>
<option data-dependent-opt="UNKNOWN">UNKNOWN</option>
</select>
<select id="status" name="status">
<option>OPEN</option>
<option>DELIVERED</option>
<option data-from-dependent="ONLINE">SHIPPED</option>
<option data-from-dependent="UNKNOWN">SHOULD SELECT</option>
<option data-from-dependent="UNKNOWN">MAYBE IN TRANSIT</option>
</select>
You're better off making two selects and showing one while hiding the other.
It's easier, and adding options to selects with your method will not work in IE8 (if you care).
I hope the following code will help or solve your problem or you think not that understandable visit http://phppot.com/jquery/jquery-dependent-dropdown-list-countries-and-states/.
HTML DYNAMIC DEPENDENT SELECT
<div class="frmDronpDown">
<div class="row">
<label>Country:</label><br/>
<select name="country" id="country-list" class="demoInputBox" onChange="getState(this.value);">
<option value="">Select Country</option>
<?php
foreach($results as $country) {
?>
<option value="<?php echo $country["id"]; ?>"><?php echo $country["name"]; ?></option>
<?php
}
?>
</select>
</div>
<div class="row">
<label>State:</label><br/>
<select name="state" id="state-list" class="demoInputBox">
<option value="">Select State</option>
</select>
</div>
GETTING STATES VIA AJAX
<script> function getState(val) { $.ajax({
type: "POST",
url: "get_state.php",
data:'country_id='+val,
success: function(data){
$("#state-list").html(data);
}
});} </script>
READ STATE DATABASE USING PHP
<?php require_once("dbcontroller.php"); $db_handle = new DBController();if(!empty($_POST["country_id"])) {
$query ="SELECT * FROM states WHERE countryID = '" . $_POST["country_id"] . "'";
$results = $db_handle->runQuery($query); ?> <option value="">Select State</option><?php foreach($results as $state) { ?> <option value="<?php echo $state["id"]; ?>"><?php echo $state["name"]; ?></option><?php } } ?>
for this, I have noticed that it far better to show and hide the tags instead of adding and removing them for the DOM. It performs better that way.
The answer should be updated to replace the defunct functions .change & .ready
$(document).on('ready',function() {
$("#source").on('change', function(){
var el = $(this);
if (el.val() === "ONLINE") {
$("#status").append("<option>SHIPPED</option>");
} else if (el.val() === "MANUAL") {
$("#status option:last-child").remove();
}
});
});