We Keep Coding

How to select the next or before value from the dropdown after the selected one?

I have a drop down which contains the Time with 30 min slide for each hour and I want to select the next option fallowing selected one. ex: the currently selected time is 7:30 PM so when I run my scenario if my current time is equal to the currently selected time then I should change the time to next slot i.e 8:00 PM. so how to write an xpth or jquery to select the nnext option?
Here is the html:
<select id="f-cut-off-time" name="f-cut-off-time" aria-invalid="false" class="valid">
<option value="6:00AM">6:00AM</option>
<option value="6:30AM">6:30AM</option>
<option selected="" disabled="" hidden="" value="7:30PM">7:30PM</option>
<option value="7:30AM">7:30AM</option>
<option value="8:00AM">8:00AM</option>
<option value="8:30AM">8:30AM</option>
<option value="9:00AM">9:00AM</option>
<option value="9:30AM">9:30AM</option>
<option value="10:00AM">10:00AM</option>
<option value="10:30AM">10:30AM</option>
<option value="11:00AM">11:00AM</option>
<option value="11:30AM">11:30AM</option>
<option value="12:00PM">12:00PM</option>
<option value="12:30PM">12:30PM</option>
<option value="1:00PM">1:00PM</option>
<option value="1:30PM">1:30PM</option>
<option value="2:00PM">2:00PM</option>
<option value="2:30PM">2:30PM</option>
<option value="3:00PM">3:00PM</option>
<option value="3:30PM">3:30PM</option>
<option value="4:00PM">4:00PM</option>
<option value="4:30PM">4:30PM</option>
<option value="5:00PM">5:00PM</option>
<option value="5:30PM">5:30PM</option>
<option value="6:00PM">6:00PM</option>
<option value="6:30PM">6:30PM</option>
<option value="7:00PM">7:00PM</option>
<option value="7:30PM">7:30PM</option>
<option value="8:00PM">8:00PM</option>
<option value="8:30PM">8:30PM</option>
<option value="9:00PM">9:00PM</option>
<option value="9:30PM">9:30PM</option>
<option value="10:00PM">10:00PM</option>
<option value="10:30PM">10:30PM</option>
<option value="11:00PM">11:00PM</option>
<option value="11:30PM">11:30PM</option>
<option value="12:00AM">12:00AM</option>
<option value="12:30AM">12:30AM</option>
<option value="1:00AM">1:00AM</option>
<option value="1:30AM">1:30AM</option>
<option value="2:00AM">2:00AM</option>
<option value="2:30AM">2:30AM</option>
<option value="3:00AM">3:00AM</option>
<option value="3:30AM">3:30AM</option>
<option value="4:00AM">4:00AM</option>
<option value="4:30AM">4:30AM</option>
<option value="5:00AM">5:00AM</option>
<option value="5:30AM">5:30AM</option>
</select>

You can retrieve the selected index of the select element, make sure there is another option that comes after it, and then locate it by index in the options collection of that select element.
$('#timeslot').on('input', function () {
var i = this.selectedIndex;
if (i + 1 < this.options.length) {
console.log("next option value is " + this.options[i + 1].value);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='timeslot'>
<option value="6:00AM">6:00AM</option>
<option value="6:30AM">6:30AM</option>
<option value="7:00AM">7:00AM</option>
<option value="7:30AM">7:30AM</option>
</select>

You could just change the value like this.
<option value="6:00PM">5:30PM</option>
That way it will appear as if they are selecting 5:30, but it is outputting 6:00

As I understand you , you need to use :
$('option:selected').next() or
$('option:selected').prev()

To select the next or previous option from the dropdown after or before the selected option you can use the following solution:
Next option:
XPath:
//select[#class='valid' and #id='f-cut-off-time']//option[#selected]//following::option[1]
Browser snapshot:
Previous option:
XPath:
//select[#class='valid' and #id='f-cut-off-time']//option[#selected]//preceding::option[1]
Browser snapshot:

Missing after argument on getting select options

I write some code for a project. Now I can't find what is wrong.
This is my code:
$('#zielland').replaceWith('<select id="zielland" name="destination_country">"{herkunfstland}"</select>');
{herkunfstland} output following:
('<select id="zielland" name="destination_country">;
<option value="AFG" data-id="">Afghanistan</option>
<option value="DZA" data-id="">Algeria</option>
<option value="ASM" data-id="">American Samoa</option>
<option value="AGO" data-id="">Angola</option>
<option value="AIA" data-id="">Anguilla</option>
<option value="ATG" data-id="">Antigua and Barbuda</option>
<option value="ARG" data-id="">Argentina</option>
<option value="ARM" data-id="">Armenia</option>
<option value="ABW" data-id="">Aruba</option>
<option value="AUS" data-id="">Australia</option>
<option value="AZE" data-id="">Azerbaijan</option>
<option value="BHS" data-id="">Bahamas</option>
<option value="BHR" data-id="">Bahrain</option>
<option value="BGD" data-id="">Bangladesh</option>
<option value="BRB" data-id="">Barbados</option>
<option value="BLZ" data-id="">Belize</option>
<option value="BEN" data-id="">Benin</option>
"</select>');
I hope that somebody can help me.
Thanks :)

Replace your first code block with
$('#zielland').replaceWith(`<select id=zielland name=destination_country>${herkunfstland}</select>`);
In order for you to use the ${ } syntax you must place it inside backticks.

Check if option is selected appear an other option value

I have something like :
<select id="BanReason">
<option value="hack">Hack</option>
<option value="badlang">Bad Language</option>
<option value="scrammer">Scrammer</option>
</select>
<select id="BanLength">
<option value="1day">1 Day</option>
<option value="2days">3 Days</option>
<option value="1week">1 Week</option>
</select>
I am trying to do, if Scrammer is selected in #BadReason select 1 week in #BanLength automaticly. 

try using change event BanReason and based on this value pass the desired value to BanLength and trigger the change.:
$("#BanReason").on("change",function(){
if(this.value == "scrammer"){
$("#BanLength").val("1week").trigger("change");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="BanReason">
<option value="hack">Hack</option>
<option value="badlang">Bad Language</option>
<option value="scrammer">Scrammer</option>
</select>
<select id="BanLength">
<option value="1day">1 Day</option>
<option value="2days">3 Days</option>
<option value="1week">1 Week</option>
</select>

On change event will help you to do this
$("#BanReason").on("change",function(){
if($(this).val() == "scrammer")
$("#BanLength").val("1week");
});
Added a Fiddle to this
Fiddle

Select on Change will change another select html javascript or jquery

I have a select like this
<select name="category" >
<option value="0" selected>Select a Manufacturer</option>
<option value="10">Acer Technologies</option>
<option value="2">Alcatel</option>
<option value="14">Apple Iphone</option>
<option value="4">Azumi</option>
<option value="12">HTC Corporation</option>
<option value="8">Huawei</option>
<option value="5">LG Electronics</option>
<option value="11">Motorola</option>
<option value="9">Nokia Microsoft</option>
<option value="1">Samsung</option>
<option value="6">Sony Ericsson</option>
<option value="3">Zhong Xing ZTE</option>
</select>
And another select HIDDEN like this
<select name="manufacturer" >
<option value="none" selected>Select a Manufacturer</option>
<option value="Acer Technologies">Acer Technologies</option>
<option value="Alcatel">Alcatel</option>
<option value="Apple Iphone">Apple Iphone</option>
<option value="Azumi">Azumi</option>
<option value="HTC Corporation">HTC Corporation</option>
<option value="Huawei">Huawei</option>
<option value="LG Electronics">LG Electronics</option>
<option value="Motorola">Motorola</option>
<option value="Nokia Microsoft">Nokia Microsoft</option>
<option value="Samsung">Samsung</option>
<option value="Sony Ericsson">Sony Ericsson</option>
<option value="Zhong Xing ZTE">Zhong Xing ZTE</option>
</select>
Both selects are almost the same value, the first one is to save the manufacturer as category and the second one is to save the manufacturers name
The first one is visible while the second one is hidden ( display:none )
What I need is:
If the user select in select one for example
<option value="2">Alcatel</option>
In some way the hidden display:none select must be autoselected to
<option value="Alcatel">Alcatel</option>
Any way to do this?
I already have Jquery running other functions on the site
Thanks

Use change function:
$( "select[name='category']" ).change(function(e) {
$( "select[name='manufacturer']" ).val( $(this).find( "option:selected" ).text() );
});
But if option text in category select do not match option value in manufacturer select - code will not work.

Hide/show the selected option on a secondary select

I have two <select> elements with different IDs.
When the user selects a value from the first select box, I want the second select box to only display connected values.
My code:
<select id="ExtraField_1" name="ExtraField_1">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
<option value="4">test4</option>
<option value="5">test5</option>
<option value="6">test6</option>
<option value="7">test7</option>
<option value="8">test8</option>
<option value="9">test9</option>
<option value="10">test10</option>
<option value="11">test11</option>
<option value="12">test12</option>
</select>
<select id="ExtraField_2" name="ExtraField_2">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
<option value="4">test4</option>
<option value="5">test5</option>
<option value="6">test6</option>
<option value="7">test7</option>
<option value="8">test8</option>
<option value="9">test9</option>
<option value="10">test10</option>
<option value="11">test11</option>
<option value="12">test12</option>
<option value="13">test13</option>
<option value="14">test14</option>
<option value="15">test15</option>
<option value="16">test16</option>
<option value="17">test17</option>
<option value="18">test18</option>
<option value="19">test19</option>
<option value="20">test20</option>
</select>
So when user selects "test1" from first select boxm he will see only "test2", "test3" and "test4" on the second select box; "test2" from first will show "test6", "test7" and "test8" in the second box.
How can I use JavaScript to resolve this problem?

If you can use jQuery then you can always just clear and append the options to the second select.
$('#ExtraField_1').change(function(){
$('#ExtraField_2').find('option').remove()
if($(this).val() == '1'){
$('#ExtraField_2').append($("<option </option>").attr('value','2').text('test2'));
$('#ExtraField_2').append($("<option></option>").attr('value','3').text('test3'));
$('#ExtraField_2').append($("<option></option>").attr('value','4').text('test4'));
}
if($(this).val() == '2'){
$('#ExtraField_2').append($("<option></option>").attr('value','5').text('test5'));
$('#ExtraField_2').append($("<option></option>").attr('value','6').text('test6'));
$('#ExtraField_2').append($("<option></option>").attr('value','7').text('test7'));
}
});
​
http://jsfiddle.net/8XVuv/2/
using only javascript is a bit more complicated but I would still take the same approach.
function createOption(otext,oValue){
var newOption = document.createElement('option');
newOption.text = otext;
newOption.value = oValue;
return newOption;
}
function clearSelect(theSelect){
for(var i = 0;i <= theSelect.options.length+1;i++)
{
theSelect.remove();
}
}
function onSelect(theSelect){
var nextSelect = document.getElementById('ExtraField_2');
clearSelect(nextSelect);
var selected = theSelect.options[theSelect.selectedIndex];
if(selected.value == 1){
nextSelect.add(createOption('test2','2'));
nextSelect.add(createOption('test3','3'));
nextSelect.add(createOption('test4','4'));
}
if(selected.value == 2){
nextSelect.add(createOption('test5','5'));
nextSelect.add(createOption('test6','6'));
nextSelect.add(createOption('test7','7'));
}
}
with html:
<select id="ExtraField_1" name="ExtraField_1" onchange="javascript: onSelect(this);" >
<option value="0">Select a test..</option>
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
<option value="4">test4</option>
<option value="5">test5</option>
<option value="6">test6</option>
<option value="7">test7</option>
<option value="8">test8</option>
<option value="9">test9</option>
<option value="10">test10</option>
<option value="11">test11</option>
<option value="12">test12</option>
</select>
<select id="ExtraField_2" name="ExtraField_2">
<option value="0">Select from the left</option>
</select>​
as you can see it still does what you expect but you are not hiding options.
http://jsfiddle.net/upKzW/13/

$('#ExtraField_1').change(function() {
$('#ExtraField_2').val(this.value);
});
http://jsfiddle.net/judearasu/rF8G6/