iam using tampermonkey and i want to select an spicific option in a selecteindex by using value to get the element want because the website displayed in defirent languages (english....spanish...ets) and not keep the same order in the index btw he always keep the same value ....by using the value i can select the same option even if web site change languege
i already tried the calissic method but not working.
document.getElementById("mySelect").selectedIndex = "2";
and here there is the source code in english
<select id="service" name="service" class="form-control-input" autocomplete="off">
<option value="">Select Service</option>
<option value="305">yes</option>
<option value="304">two</option>
<option value="303">storm</option></select>
and here there is the source code in french
<select id="service" name="service" class="form-control-input" autocomplete="off">
<option value="">Select Service</option>
<option value="303">orga</option>
<option value="304">deux</option>
<option value="305">oui</option></select>
If I understand you correctly, you can choose - for example - yes and oui by using an xpath expression:
document.evaluate("//option[#value='305']", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null )
The two words can be accessed in a for loop by
nodesSnapshot.snapshotItem(i).textContent
Related
I'm trying to change select tag options using this code in cefsharp
Browser.MainFrame.ExecuteJavaScriptAsync("document.getElementById(\"REG_CATSEQ\").selectedindex = 1;");
This is the select code
<select id="REG_CATSEQ" name="REG_CATSEQ" class="form-control select2">
<option value="">Select a value...</option>
<option value="1">تسجيل لأول مرة</option>
<option value="2">الواقعات الحياتية</option>
</select>
Looks like you have made a typo. Both languages are case sensitive. https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedIndex
Browser.MainFrame.ExecuteJavaScriptAsync("document.getElementById(\"REG_CATSEQ\").selectedIndex = 1;");
I have a number of dropdowns like this
code:
<label for="schoolType">
Type of School <span style="color: red">*</span>
</label>
<select class="form-control" id="schoolType" name="schoolType" value="{{user.schoolType}}">
<option value="none">None</option>
<option value="public">Public</option>
<option value="private">Private</option>
<option value="homeSchool">Home School</option>
</select>
and the database field is like so
What I'm trying to accomplish
This is a select field that is filled out in registration so I want to grab the value from the database and display it in the edit profile so the users can edit their profiles and change the select if need be.
But as the user refreshes I want the option that they select to be in the select as the selected value.
For reference I am using node.js, express and the handlebars templating engine.
To solve an issue like this, I will advise you to fetch the value selected by the user before, store it in a variable and use a ternary operator to activate it. An actual example is given below.
var selectedValue = user.schoolType;
<select class="form-control" id="schoolType" name="schoolType" value="
{{user.schoolType}}">
<option value="none" selected="{{user.schoolType ===
this.value}}">None</option>
<option value="public" selected="{{user.schoolType ===
this.value}}">Public</option>
<option value="private" selected="{{user.schoolType ===
this.value}}">Private</option>
<option value="homeSchool" selected="{{user.schoolType ===
this.value}}">Home School</option>
</select>
I'am using this code along with php code for a select and used required class to make it mandatory but it is not working. Does anyone can help me.I have included this html section along with php code.
<select name="category" required="required" class="form-control">
<option value=" ">--Select Category--</option>
<option value="asd">asd</option>
</select>
Try to remove space value in your select category option
<select name="category" required="required" class="form-control">
<option value="">--Select Category--</option>
<option value="asd">asd</option>
</select> code here
First of all, replace
<option value=" ">--Select Category--</option>
with
<option value="">--Select Category--</option>
And then, as w3c says, ... "The required attribute is a boolean attribute. When specified, the element is required."
<select name="category" required class="form-control">
<option value="">--Select Category--</option>
<option value="asd">asd</option>
</select>
Also here you can find same example.
And here you can try the code.
Required is working. The fact is that " " is a value and "" is not.
You have to add required and value attributes
<select required="true" name="unit">
<option disabled selected value="">-- Select One --</option>
<option>Square Feet</option>
<option>Square Yards</option>
<option>Square Meters</option>
<option>Marla</option>
<option>Kanal</option>
In my case, the required attribute on the select element wasn't working because the first option element had the selected attribute added.
selected attribute broke the required attribute
<label for="procedures_of_interest">Procedures Of Interest</label>
<select name="procedures_of_interest" id="procedures_of_interest" required multiple="multiple">
<option value="" selected disabled>Select One or More</option>
<option value="first">first</option>
<option value="second">second</option>
<option value="last">last</option>
</select>
By removing the the selected attribute from the option element, the required and multiple attributes both worked correctly on the select element:
<label for="procedures_of_interest">Procedures Of Interest</label>
<select name="procedures_of_interest" id="procedures_of_interest" required multiple="multiple">
<option value="" disabled>Select One or More</option>
<option value="first">first</option>
<option value="second">second</option>
<option value="last">last</option>
</select>
Try changing the required part to true
So it'll be like required="true", did it work?
You are using required only which is HTML5 validation, may be its not work on all browser. Is you are looking for the proper validation i suggest to with jquery validation.
Validation Document
I have a select element with six options, the first being a blank option:
<select name="method-rcvd" class="form-control" ng-model="workRequest.ReceiveMethod" required >
<option value="" ng-selected="true"></option>
<option value="1">Phone</option>
<option value="2">Email</option>
<option value="3">Fax</option>
<option value="4">Mail</option>
<option value="5">Other</option>
</select>
On the scope is the object property bound to this select:
$scope.workRequest.ReceiveMethod = "";
For some reason, the select ALWAYS defaults to "Phone", instead of blank. I want it to default to blank. When I remove the model binding it works, so I know it has something to do with that, but it needs to be bound. This seems to me that it should be relatively straightforward, but I am having a very difficult time getting this simple thing working.
When I spit out the value of ReceiveMethod below the select:
Receive Method: {{workRequest.ReceiveMethod}}
It always defaults to "1". How can I get this to default to the first option, the blank option?
Thanks.
Are you setting a default value in the controller?
What happens if you set default value to 0 instead of ''?
That should work but something must be setting another value on workRequest.ReceiveMethod
I got this working by using the ng-init directive, like so:
<select name="method-rcvd" class="form-control"
ng-model="workRequest.ReceiveMethod"
ng-init="workRequest.ReceiveMethod = ''" required >
<option value=""></option>
<option value="1">Phone</option>
<option value="2">Email</option>
<option value="3">Fax</option>
<option value="4">Mail</option>
<option value="5">Other</option>
</select>
You also don't need the
ng-selected="true"
in the first (blank) option.
Here is the issue.
I have a select dropdown list.
<select name="listingtype" id="speedD" style="width:210px;">
<option>For Sale</option>
<option>For Rent</option>
</select>
And another select drop down list where the prices appear , which on page load it is empty..
So if user clicks For Sale: then the other select drop down list, loads price list like so:
<select name="valueA" id="speedF" style="width:200px;">
<option value="Any" selected="selected">Any</option>
<option value="50000">$50,000</option>
<option value="100000">$100,000</option>
<option value="150000">$150,000</option>
<option value="200000">$200,000</option>
<option value="250000">$250,000</option>
And if they choose For Rent. Select drop down is propagated like so:
<select name="valueA" id="speedF" style="width:200px;">
<option value="Any" selected="selected">Any</option>
<option value="100">$100</option>
<option value="150">$150</option>
<option value="200">$200</option>
<option value="250">$250</option>
<option value="300">$300</option>
</select>
I need this code to be client side, no need for server side. And just wanted to know what the cleanest method for doing this is.
Cheers.
First of all I recommend setting the value attribute in your option elements.
Example:
<option value="sale">For sale</option>
<option value="rent">For rent</option>
If you have not already heard of or seen the JavaScript library known as jQuery I strongly recommend checking it out! It can be very helpful when creating a dynamic site like this using minimal JavaScript.
I would do something like the following:
<html>
...
<body>
<div id="fillme"></div>
<script type="text/javascript">
if (document.yourformname.listingtype.value == "sale") {
//it is for sale
$('#fillme').html('<select name="valueA" id="speedF" style="width:200px;"><option value="Any" selected="selected">Any</option><option value="50000">$50,000</option><option value="100000">$100,000</option><option value="150000">$150,000</option><option value="200000">$200,000</option><option value="250000">$250,000</option></select>');
} else {
//fill it with the other elements
}
</script>
</body>
</html>
Now of course you could load it more dynamically with JSON or XML but that is up to you. I really recommend checking out the library:
http://jQuery.com
Use JavaScript to fill the empty select with options when the user selects an option (either onchange or onselect, forget which) in the For Sale/For Rent select.
EDIT: More specifically, have that second box be empty when the page loads. Store the options in arrays. Use a loop to create new OPTION elements based on each array item.