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
Related
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:
When I change the option, the page doesn't change.
I want to change the page to '(value).html'.
function countryHandler() {
var x = document.getElementsByID("country").value;
window.location.href = "";
}
<select id="country" onclick="countryHandler();">
<option value="">Country...</option>
<option value="KR">Korea</option>
<option value="US">United States of America</option>
</select>
<select id="country" onchange="countryHandler(this.value)">
<option value="">Country...</option>
<option value="KR">Korea</option>
<option value="US">United States of America</option>
</select>
<script>
function countryHandler(value) {
window.location.assign(`${value}.html`);
}
</script>
You have to listen on change in select section.
Use
window.location('http://example.com');
or
window.location.assign('http://example.com');
The onchange attribute fires the moment when the value of the element is changed.
function urlHandler(value) {
window.location.assign(`${value}`);
}
<select id="url" onchange="urlHandler(this.value)">
<option disabled selected value>Select Option</option>
<option value="https://techne.africa">TechNe Africa</option>
<option value="https://google.com">Google</option>
<option value="https://facebook.com">Facebook</option>
<option value="https://twitter.com">Twitter</option>
<option value="https://instagram.com">Instagram</option>
<option value="https://youtube.com">YouTube</option>
<option value="https://linkedin.com">LinkedIn</option>
</select>
I need to change the 3rd field automatically depending on first two field. ( it would be best if I change 3rd field and then first 2 fields changes also )
I need a Jquery solution. Anyone can help me please?
<select id="First">
<option val="car">car</option>
<option val="phone">phone</option>
</select>
<select id="Second">
<option val="car">car</option>
<option val="phone">phone</option>
<option val="boll">boll</option>
</select>
<hr>
<select id="ChangeItAutomatically">
<option val="carcar">car car</option>
<option val="carphone">car phone</option>
<option val="carboll">car boll</option>
<option val="phonecar">phone car</option>
<option val="phonephone">phone phone</option>
<option val="phonecarboll">phone boll</option>
</select>
Is this what you're looking for?
$(document).ready(function() {
// on change for the 3rd select
$("#ChangeItAutomatically").on("change", function() {
// get the value and split on space
var value = $(this).val().split(" ");
// select the other two selects based on the values
$("#First").val(value[0]);
$("#Second").val(value[1]);
});
// on change for the first two selects
$("#First, #Second").on("change", function() {
// set the value of the 3rd select based on the combination of values of the first two
$("#ChangeItAutomatically").val($("#First").val() + " " + $("#Second").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="First">
<option val="car">car</option>
<option val="phone">phone</option>
</select>
<select id="Second">
<option val="car">car</option>
<option val="phone">phone</option>
<option val="boll">boll</option>
</select>
<hr>
<select id="ChangeItAutomatically">
<option val="car car">car car</option>
<option val="car phone">car phone</option>
<option val="car boll">car boll</option>
<option val="phone car">phone car</option>
<option val="phone phone">phone phone</option>
<option val="phone boll">phone boll</option>
</select>
I am trying to use a slightly modified version of this code to show/hide the field Return Time on this page based on Type of Trip:
One Way: Return Time is hidden
Round Trip: Return Time is shown
Here is the Select Box html. Code is autogenerated by cforms on wordpress.
<select name="TripType" id="TripType" class="cformselect" >
<option value="One Way">One Way</option>
<option value="Round Trip">Round Trip</option>
</select>
And here is the form element I'm trying to hide:
<li id="li--8" class=""><label id="label--8" for="DepartLeg2-Time"><span>Return Time</span></label><select name="DepartLeg2-Time" id="DepartLeg2-Time" class="cformselect" >
<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>
<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>
<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>
</select></li>
Here is the javascript I'm using:
$("#TripType").change(function() {
$("#li--8")[$(this).val() == "Round Trip" ? 'show' : 'hide']("fast");
}).change();
I have the code working here on JSFiddle: http://jsfiddle.net/MS4Ck/. However, it is not working on the site. My console is not giving me any errors except for a reference error coming from some logging code I put in there to make sure the javascript is being called (it is). Any ideas? Thank you so much!
Just a guess, but make sure this function is wrapped in a docReady function eg:
$(document).ready(function() {
$("#TripType").change(function() {
$("#li--8")[$(this).val() == "Round Trip" ? 'show' : 'hide']("fast");
}).change();
});
I'm stuck with a jquery problem .. I actually want to disable all the (from all other items except the parent one) if the selected value is "interestingValue"
<select name="menufoo" id="menufoo" class="menufooClass">
<option value="interestingValue">bar foo</option>
<option value="foo1">foo abc1</option>
<option value="bar1">foo abc1</option>
</select>
<select name="menufoo2" id="menufoo2" class="menufooClass2">
<option value="interestingValue2">bar foo2</option>
<option value="foo2">foo abc2</option>
<option value="bar2">foo abc2</option>
</select>
ex : if we select "interestingValue" from the first menu we get
<select name="menufoo" id="menufoo" class="menufooClass">
<option value="interestingValue">bar foo</option>
<option value="foo1">foo abc1</option>
<option value="bar1">foo abc1</option>
</select>
<select name="menufoo2" id="menufoo2" class="menufooClass2">
<option value="interestingValue2" disabled="disabled">bar foo2</option>
<option value="foo2" disabled="disabled">foo abc2</option>
<option value="bar2" disabled="disabled">foo abc2</option>
</select>
ex : if we select "interestingValue2" from the second menu we get
<select name="menufoo" id="menufoo" class="menufooClass">
<option value="interestingValue" disabled="disabled">bar foo</option>
<option value="foo1" disabled="disabled">foo abc1</option>
<option value="bar1" disabled="disabled">foo abc1</option>
</select>
<select name="menufoo2" id="menufoo2" class="menufooClass2">
<option value="interestingValue2">bar foo2</option>
<option value="foo2">foo abc2</option>
<option value="bar2">foo abc2</option>
</select>
thanks :)
If your select tags are siblings you can try:
$('select').change(function(){
if (this.selectedIndex == 0) {
$(this).siblings('select').find('option').prop('disabled', true)
}
})
DEMO
I'm not sure I get it, but something like this:
$('[id^=menufoo]').on('change', function() {
if (this.value.indexOf('interestingValue') != -1 ) {
$('[id^=menufoo]').not(this).find('option').prop('disabled', true);
}else{
$('[id^=menufoo]').find('option').prop('disabled', false);
}
});
FIDDLE
You can attach an onchange event to both select items and check whether the new select value is equivalent to interestingValue for the first menu and interestingValue2 from the second menu. You can use .prop() to disable this.
You can do something like this:
$("#menufoo").bind("change", function(event){
$("#menufoo2").find("option").prop("disabled", ($(this).val() == "interestingValue"));
});
$("#menufoo2").bind("change", function(event){
$("#menufoo").find("option").prop("disabled", ($(this).val() == "interestingValue2"));
});
here you go
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#menufoo").change(function (){
if($("#menufoo option:selected").val()=="interestingValue")
$('.menufooClass2 option').attr('disabled','disabled');
});
$("#menufoo2").change(function (){
if($("#menufoo2 option:selected").val()=="interestingValue2")
$('.menufooClass option').attr('disabled','disabled');
});
});
</script>
<select name="menufoo" id="menufoo" class="menufooClass">
<option value="interestingValue">bar foo</option>
<option value="foo1">foo abc1</option>
<option value="bar1">foo abc1</option>
</select>
<select name="menufoo2" id="menufoo2" class="menufooClass2">
<option value="interestingValue2">bar foo2</option>
<option value="foo2">foo abc2</option>
<option value="bar2">foo abc2</option>
</select>