Develop Reference

If the selected option is greater than others, disable other options

I have two Selectbox groups.
When the user selects an item from the 1st Selectbox group; According to the selected Value, I want to disable some of the items in the 2nd Selectbox group.
Below is my sample code. The example scenario I want to do based on the following set of code is as follows:
<select name="group1" id="group1">
<option value="12">Opt 1</option>
<option value="13">Opt 2</option>
<option value="21">Opt 3</option>
<option value="22">Opt 4</option>
<option value="24">Opt 5</option>
<option value="35">Opt 6</option>
<option value="57">Opt 7</option>
<option value="62">Opt 8</option>
</select>
<select name="group2" id="group2">
<option value="12">Opt 1</option>
<option value="13">Opt 2</option>
<option value="21">Opt 3</option>
<option value="22">Opt 4</option>
<option value="24">Opt 5</option>
<option value="35">Opt 6</option>
<option value="57">Opt 7</option>
<option value="62">Opt 8</option>
</select>
For example: If the user selects <option value="22">Opt 4</option> from the 1st Selectbox,
In Selectbox 2. group this option items should automatically become "disabled" in the group:
<option value="12">Opt 1</option>
<option value="13">Opt 2</option>
<option value="21">Opt 3</option>
<option value="22">Opt 4</option>
So what I want to do is as follows: According to the value values in the Selectbox, after each item selection, it should be able to select larger values of the current selection in the other Selectbox step.

Using the jQuery on('change' listener, we can access the current selected value with $(this).val() - then loop through the second select, setting .prop('disabled' to true/false based on it's value being equal to or less than the first selected value. Because we're comparing Numbers but the values we're getting are strings, we need to convert them with Number(), parseInt() or the shorthand prefix operator +
$('#group1').on('change', function() {
let val = Number($(this).val());
$('#group2 option').each(function() {
$(this).prop('disabled', Number($(this).val()) <= val)
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="group1" id="group1">
<option value="12">Opt 1</option>
<option value="13">Opt 2</option>
<option value="21">Opt 3</option>
<option value="22">Opt 4</option>
<option value="24">Opt 5</option>
<option value="35">Opt 6</option>
<option value="57">Opt 7</option>
<option value="62">Opt 8</option>
</select>
<select name="group2" id="group2">
<option value="12">Opt 1</option>
<option value="13">Opt 2</option>
<option value="21">Opt 3</option>
<option value="22">Opt 4</option>
<option value="24">Opt 5</option>
<option value="35">Opt 6</option>
<option value="57">Opt 7</option>
<option value="62">Opt 8</option>
</select>

$('#group1').on('change' , function(){
var value = $(this).find('option:selected').val();
$('#group2').find('option').prop('disabled',false);
$('#group2').find('option').each(function(i,e){
var opt = $(e);
if(opt.val() < value){
opt.prop('disabled',true);
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="group1" id="group1">
<option value="12">Opt 1</option>
<option value="13">Opt 2</option>
<option value="21">Opt 3</option>
<option value="22">Opt 4</option>
<option value="24">Opt 5</option>
<option value="35">Opt 6</option>
<option value="57">Opt 7</option>
<option value="62">Opt 8</option>
</select>
<hr>
<select name="group2" id="group2">
<option value="12">Opt 1</option>
<option value="13">Opt 2</option>
<option value="21">Opt 3</option>
<option value="22">Opt 4</option>
<option value="24">Opt 5</option>
<option value="35">Opt 6</option>
<option value="57">Opt 7</option>
<option value="62">Opt 8</option>
</select>
I am sharing an example above. When there is a change in the first selectbox, it takes the selected value and compares the second selectbox, if the selected value is large, it adds a disabled attribute.

Remove select placeholder after selecting option

After selecting option from list hide placeholder (Select option). If after clicked on select box placeholder must be hidden.
<select class="name">
<option value="">Select Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>

You could do it like this:
$("select").change(function() {
$(this).find("option:first").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="name">
<option value="">Select Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>

you can set a js-handler, to remove the Option-noe (here the jQuery Version):
<select class="name" id="myselect">
<option value="">Select Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
and the js
jQuery(function(){
jQuery ('#myselect').on('change', function(){
jQuery(this).find('[value=""]').remove();
})
});
https://jsfiddle.net/k08zj6r9/
if you wish, you can disable the node, instead of remove.
jQuery(this).find('[value=""]').attr('disabled','disabled');

creating auto select box using same id with jquery or javascript

I have four select box.If I choose one select box, I want to choose another three select box automatically.I could do it but it can't use same id .I want to use same id in other select box without changing id.How can I do that?Please help me.
Html
<select class="selectbox" name="select1" id="select1">
<option value="1">Business Center</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
</select>
<select class="selectbox" name="select2" id="select2">
<option value="1">Chinese</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
</select>
<select class="selectbox" name="select3" id="select3">
<option value="1">English Center</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
</select>
<select class="selectbox" name="select4" id="select4">
<option value="1">Korea Center</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
</select>
Jquery
$(document).ready(function(){
$('#select1').on('change' , function(){
var getVal = $(this).val();
$('#select2 option[value="'+getVal+'"]').show().first().prop('selected' , true);
$('#select3 option[value="'+getVal+'"]').show().first().prop('selected' , true);
$('#select4 option[value="'+getVal+'"]').show().first().prop('selected' , true);
}).change();
$('#select2').on('change' , function(){
var getVal = $(this).val();
$('#select1 option[value="'+getVal+'"]').show().first().prop('selected' , true);
$('#select3 option[value="'+getVal+'"]').show().first().prop('selected' , true);
$('#select4 option[value="'+getVal+'"]').show().first().prop('selected' , true);
}).change();
$('#select3').on('change' , function(){
var getVal = $(this).val();
$('#select1 option[value="'+getVal+'"]').show().first().prop('selected' , true);
$('#select2 option[value="'+getVal+'"]').show().first().prop('selected' , true);
$('#select4 option[value="'+getVal+'"]').show().first().prop('selected' , true);
}).change();
$('#select4').on('change' , function(){
var getVal = $(this).val();
$('#select1 option[value="'+getVal+'"]').show().first().prop('selected' , true);
$('#select2 option[value="'+getVal+'"]').show().first().prop('selected' , true);
$('#select3 option[value="'+getVal+'"]').show().first().prop('selected' , true);
}).change();
});

It's way more simpler than you expected, setting the value to the select, will select the corresponding option, like this:
$(document).ready(function(){
$('#select1').on('change' , function(){
$('#select2').val($(this).val());
$('#select3').val($(this).val());
$('#select4').val($(this).val());
}).change();
$('#select2').on('change' , function(){
$('#select1').val($(this).val());
$('#select3').val($(this).val());
$('#select4').val($(this).val());
}).change();
$('#select3').on('change' , function(){
$('#select2').val($(this).val());
$('#select1').val($(this).val());
$('#select4').val($(this).val());
}).change();
$('#select4').on('change' , function(){
$('#select2').val($(this).val());
$('#select3').val($(this).val());
$('#select1').val($(this).val());
}).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selectbox" name="select1" id="select1">
<option value="1">Business Center</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
</select>
<select class="selectbox" name="select2" id="select2">
<option value="1">Chinese</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
</select>
<select class="selectbox" name="select3" id="select3">
<option value="1">English Center</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
</select>
<select class="selectbox" name="select4" id="select4">
<option value="1">Korea Center</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
</select>

Expanding on Marcelo Origoni's answer, you can also use the .siblings() function for selecting all other <select>s at once. Note that if there is any other elements on the same level, you might want to do .siblings('select') instead of just .siblings().
$(document).ready(function(){
$('#select1, #select2, #select3, #select4').on('change' , function(e){
$(this).siblings().val($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selectbox" name="select1" id="select1">
<option value="1">Business Center</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
</select>
<select class="selectbox" name="select2" id="select2">
<option value="1">Chinese</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
</select>
<select class="selectbox" name="select3" id="select3">
<option value="1">English Center</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
</select>
<select class="selectbox" name="select4" id="select4">
<option value="1">Korea Center</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
</select>

Returning form results in a separate div tag

So I want to return a user's form results in a div so they can see what they have chosen underneath the form using JQuery but struggling to use the right code? Ive tried using the .html function and replaceWith. etc but nothing seems to be working?
Here's my html code:
<form id="myform">
<h4>Enter your booking slot here:</h4><br>
<select id="programmes">
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
<option value="test4">Test 4</option>
<option value="test5">Test 5</option>
</select><br><br>
<select id="time">
<option value="one">01:00</option>
<option value="two">02:00</option>
<option value="three">03:00</option>
<option value="four">04:00</option>
<option value="five">05:00</option>
<option value="six">06:00</option>
<option value="seven">07:00</option>
<option value="eight">08:00</option>
<option value="nine">09:00</option>
<option value="ten">10:00</option>
<option value="eleven">11:00</option>
<option value="twevle">12:00</option>
<option value="one-pm">13:00</option>
<option value="two-pm">14:00</option>
<option value="three-pm">15:00</option>
<option value="four-pm">16:00</option>
<option value="five-pm">17:00</option>
<option value="six-pm">18:00</option>
<option value="seven-pm">19:00</option>
<option value="eight-pm">20:00</option>
<option value="nine-pm">21:00</option>
<option value="ten-pm">22:00</option>
<option value="eleven-pm">23:00</option>
<option value="midnight">00:00</option>
</select><br><br>
<button type="submit" value="Submit Booking">
</form>
</div>
<div></div>

$('#select').on('change', function() {
$('#result').html( $(this).find('option:selected').text() )
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select">
<option value="test_1">Test 1</option>
<option value="test_2">Test 2</option>
<option value="test_3">Test 3</option>
<option value="test_4">Test 4</option>
<option value="test_5">Test 5</option>
</select>
<div id="result"></div>

Using jquery.append() method

What's wrong in my code that the append method dont work? I do get the alert but the actual method that will append is not working. Please see the code below:
jQuery(document).ready(function()
{
if (!document.getElementById('my_options').value)
{
alert('here');
jQuery('#my_options').append('<span id="option_id_error" class="errors">Error</span>');
}
});
HTML:
<select id="my_options" name="my_options">
<option value="">--Select--</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<br/>
<select id="my_options2" name="my_options2">
<option value="">--Select--</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<br/>
<select id="my_options3" name="my_options3">
<option value="">--Select--</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
The select in the form is dynamically generated. If none is selected on the dropdown box, it will display the span error message. So my expected result is this:
<select id="my_options" name="my_options">
<option value="">--Select--</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select> <span>Error</span>
I don't need to add something on the options.

What you are doing is not correct as a SPAN item is not valid within an SELECT item.
If you try to add a new option for example it will work
$('#my_options').append('<option value="5">item</option>');
what you can do is to wrap the select item inside a DIV as showed below
<div id="option1">
<select id="my_options" name="my_options">
<option value="">--Select--</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
</div>
than you can do:
$('#option1').append('<span id="option_id_error" class="errors">Error</span>');
you can see it working at the below link
http://jsfiddle.net/LGkWp/

if you need to add this <span> element just next to <select> you may use .after(..) method:
jQuery('#my_options').after('<span id="option_id_error" class="errors">Error</span>');