Develop Reference

Dropdown options - redirect to custom url depending to selected option

I've simple dropdown with some options.
<label for="server-select">Choose a instance type:</label>
<select name="servers" id="server-select">
<option value="">--Please choose an option--</option>
<option value="https://instance1.com">Instance1</option>
<option value="https://instance2.com">Instance2</option>
<option value="https://instance3.com">Instance3</option>
<option value="https://instance4.com">Instance4</option>
</select>
<button>Submit</button>
When I select example Instance3 I need to redirect to this custom url on submit.
Can anyone help me to do?

Try this!
function goToUrl(){
window.location = document.getElementById("server-select").value;
};
<label for="server-select">Choose a instance type:</label>
<select name="servers" id="server-select">
<option value="">--Please choose an option--</option>
<option value="https://instance1.com">Instance1</option>
<option value="https://instance2.com">Instance2</option>
<option value="https://instance3.com">Instance3</option>
<option value="https://instance4.com">Instance4</option>
</select>
<button onclick="goToUrl()">Submit</button>
This code won't run properly in the StackOverflow's code snippet. You may have to run it by adding this to your own project.
Thanks and best regards!

$(document).ready(function(){
$('#server-select').change(function(){
window.open(this.value, '_self');
});
});
This will achieve what you are looking for with jQuery, example: https://jsfiddle.net/rz8ty90n/

Angular 2 form set selected of STATIC select menu

I've got a Angular 2 form with a static select menu
<select formControlName="type" name="type">
<option value="reference">Referentie</option>
<option value="name">Aanhef</option>
<option value="street">Street</option>
<option value="postcode">Postcode</option>
</select>
How can I set the first as the selected value. What ever I do it turns up blank.
I've tried:
<option selected...
<option selected="selected"...
<option [selected]="selected"...
<option [selected]="reference"...
this.searchform.value.type = 'reference';
Hope someone can help.

this.searchform.controls['type'].setValue('reference')

<option value="name" selected>Aanhef</option>
works. You can refer
Plunkr

How to set the value of multiple dropdown selectors based on the value of another dropdown selector on change?

EDIT: post the question and magically it starts working :/ Maybe because I removed the alert?
So I have a dropdown selector that is supposed to represent the default for a set of dropdown selectors that make up a country list.
Here is one of the many code permutations I tried:
$("#edit-ip-ban-setdefault").change(function () {
var selected = this.selectedIndex
$(".form-type-select").each(function() {
$('.form-select').attr('selectedIndex', selected);
$(".form-select").val(selected).change();
});
});
Here is the relevant HTML for the default dropdown:
<select class="form-select valid" name="ip_ban_setdefault" id="edit-ip-ban-setdefault" selectedindex="1">
<option value="0"></option>
<option value="1"> Read Only </option>
<option selected="selected" value="2"> Complete Ban </option>
</select>
And here is the HTML for one of the many dropdowns I wish to have updated on change:
<div class="form-item form-type-select form-item-ip-ban-AF">
<select class="form-select valid" id="edit-ip-ban-af" name="ip_ban_AF">
<option selected="selected" value="0"></option>
<option value="1">Read Only</option>
<option value="2">Complete Ban</option>
</select>
</div>
I'm using jQuery 1.7, but ideally the solution would work for 1.5 to 1.10.

How to select an option with CasperJS

I try to set select option attribute to selected. But I try to avoid using nth-child in CasperJS because there are bugs in PhantomJS's nth-child.
So I try to use this as the subtitution of jQuery(css_path).
function setSelectedCountry(i){
window.__utils__.echo("i :"+i);
var query = "//*[#id='cboCountry']/optgroup[2]/option["+i+"]";
__utils__.getElementByXPath(query).setAttribute("selected","selected");
}
But, when I evaluate that code by this way
this.evaluate(setSelectedCountry, 5);
The select option is not changed.
Moreover, when I try to trigger onblur() using
document.getElementById("cboCountry").onblur();
inside setSelectedCountry() funtion, there were nothing happened.
Why this happened?
Also, when I try to call the function with XPath expression, and the other one is using CSS selector, I got undefined error returned from CasperJS.
I use this function :
function getCityName(i){
var query = "//*[#id='cboCity']/option["+i+"]";
return __utils__.getElementByXPath(query).innerText;
}
then I got the other one:
function setSelectedCountry(i){
var query = "#cboCountry > optgroup:nth-child(3) > option:nth-child("+i+")";
jQuery(query).attr("selected", "selected").blur();
}
When I try to run both of them, then this is what I've got
PAGE.ERROR: TypeError: 'undefined' is not an object (evaluating
'__utils__.getElementByXPath(query).innerText')
Can you give me suggestions?
[EDITED]
Here is my markup :
This one for cboCountry select option :
<select name="cboCountry" id="cboCountry" onkeypress="return selectItem();" onkeyup="event.cancelbubble=true;return false;" onkeydown="return handleKey();" onfocus="activeList=this;this.enteredText='';" onchange="//hs.DropCity();" onblur="hs.DropCity();"
class="txtBox">
<option value="">-- --Select-- --</option>
<optgroup label="Popular Destinations">
<option value="MA05110065">Indonesia</option>
<option value="MA05110067">Malaysia</option>
<option value="MA05110069">Singapore</option>
<option value="MA05110001">Thailand</option>
</optgroup>
<optgroup label="Other Destinations">
<option value="MA05110083">Afghanistan</option>
<option value="MA05110124">Albania</option>
<option value="MA05110133">Algeria</option>
<option value="MA05110186">American Samoa</option>
<option value="MA05110103">Andorra</option>
<option value="MA05110014">Angola</option>
<option value="MA05110135">Anguilla (UK)</option>
<option value="MA05110136">Antigua and Barbuda</option>
<option value="MA05110171">Argentina</option>
<option value="MA05110206">Armenia</option>
<option value="MA05110183">Venezuela</option>
<option value="MA05110070">Vietnam</option>
<option value="MA05110013">Western Sahara</option>
<option value="MA05110082">Yemen</option>
<option value="MA05110027">Zambia</option>
<option value="MA05110028">Zimbabwe</option>
</optgroup>
</select>
And this one for cboCity select option :
<select name="cboCity" id="cboCity" onkeypress="return selectItem();" onkeyup="event.cancelbubble=true;return false;" onkeydown="return handleKey();" onfocus="activeList=this;this.enteredText='';" onchange="//hs.DropLocation();" onblur="hs.DropLocation();"
class="txtBox">
<option value="">-- --Select-- --</option>
<option value="">-- Select --</option>
<option value="MA02022810">Ambarawa</option>
<option value="MA09090008">Ambon</option>
<option value="MA08090042">Anyer</option>
<option value="MA02022861">Wonosobo</option>
<option value="MA06060051">Yogyakarta</option>
</select>

The problem is the distinction between property and attribute. Browsers usually don't re-evaluate attributes when you change them in the DOM. In those cases, you would need to change the property behind that attribute on the DOM element.
In this case, you need to change the selected index. The select element has the selectedIndex property that you can change to the intended option which you can get through option.index:
function setSelectedCountry(i){
__utils__.echo("i :"+i);
var opt = "//*[#id='cboCountry']/optgroup[2]/option["+i+"]";
var select = document.getElementById('cboCountry');
select.selectedIndex = __utils__.getElementByXPath(opt).index;
select.onblur(); // or `onchange()`
}
See this answer for more information on the option index.
"//*[#id='cboCity']/option["+i+"]" cannot work, because this expression will match options that are direct children of a #cboCity element, but you have an optgroup inbetween. Either use "//*[#id='cboCity']//option["+i+"]" or "//*[#id='cboCity']/optgroup/option["+i+"]".

select option using jquery fails?

Here iam trying to get values based on #category selection when i select a category men or women,following select option should show the relevant options.what i did satisfied my requirement but when i try to access it using keyboard(down arrow) it shows all the options of the #subcategory.here is the code and fiddle.any help is thankful.
my fiddle http://jsfiddle.net/JUGWU/
HTML:
<select id="category" name="category">
<option>-select-</option>
<option value="MEN" id="menu1">MEN</option>
<option value="WOMEN" id="menu2">WOMEN</option>
</select>
<br>
<select id="subcategory">
<option></option>
<option id="Clothing" value="Clothing">Clothing</option>
<option id="Accessories" value="Accessories">Accessories</option>
<option id="Footwear" value="Footwear">Footwear</option>
<option id="Watches" value="Watches">Watches</option>
<option id="Sunglasses" value="Sunglasses">Sunglasses</option>
<option id="Bags" value="Bags">Bags</option>
</select>
Jquery:
$(document).ready(function(){
$("#category").change(function() {
var xyz = $("option:selected").attr("id");
alert(xyz);
if(xyz === "menu1"){
$("#subcategory option").hide();
$("#Clothing,#Footwear").show();
}
});
});

Try this in your conditional. The disabled property doesn't allow keyboard selection. Seems to work for me.
$("#subcategory option").prop('disabled', true).hide();
$("#Clothing,#Footwear").prop('disabled', false).show();
Also, your logic breaks if a user switches from men to women.

This answer is not exactly addressing your problem (using keyboard(down arrow)) but I think it is IMHO a better way to do what you want. And also I used the fixed part from #user2301903 answer, just to make my point. my main point here was using the markup attributes.
We can use our markup attributes to have less complexity, I changed your markup like this (added a catg attribute):
<select id="category" name="category">
<option>-select-</option>
<option value="MEN" id="menu1" catg="m">MEN</option>
<option value="WOMEN" id="menu2" catg="w">WOMEN</option>
</select>
<br>
<select id="subcategory">
<option></option>
<option id="Clothing" value="Clothing" catg="m">Clothing</option>
<option id="Accessories" value="Accessories" catg="w">Accessories</option>
<option id="Footwear" value="Footwear" catg="m">Footwear</option>
<option id="Watches" value="Watches" catg="w">Watches</option>
<option id="Sunglasses" value="Sunglasses" catg="w">Sunglasses</option>
<option id="Bags" value="Bags" catg="w">Bags</option>
</select>
and your code like this:
$(document).ready(function () {
$("#category").change(function () {
var catg = $("option:selected").attr("catg");
//from #user2301903 answer
$("#subcategory option").prop('disabled', true).hide();
$("option[catg=" + catg + "]").prop('disabled', false).show();
});
});
and this is your working DEMO;
and this one is another way of doing what you want which works even in IE: IE_DEMO