For localization lang, I created a drropdown with two options Eng and Th (Thai). But While fetching the data, four options are showing for the same.
For example, if I select Thai, then 3 Thai options, and one Eng is showing, and vice versa for Eng also.As shown in figure
please help to figure it out.
My Selection code as follows:
<select
name="EN"
id="EN"
onChange={(e) => {
localStorage.setItem("lang", e.target.value);
window.location.reload(false);
}}
>
{localStorage.getItem("lang") !== null ? (
<option selected={localStorage.getItem("lang")}>
{localStorage.getItem("lang").toUpperCase()}
</option>
) : null}
<option value="en">EN</option>
<option value="th">TH</option>
</select>
The first one showing is the selected option you had wrote here:
<option selected={localStorage.getItem("lang")}>
{localStorage.getItem("lang").toUpperCase()}
</option>
The second one when you display the dropdown, is your selected one and I believe that's how the select element works by default. I don't know how to change that behavior.
Now, the third and fourth options are the ones you wrote here:
<option value="en">EN</option>
<option value="th">TH</option>
I would do something like:
{(localStorage.getItem("lang")) === en ?
<option value="th">TH</option> :
<option value="en">EN</option>)}
That way, you would only have the selected one, and the not selected one as options. The way you have wrote the code it will always show an EN and a TH option regardless the selected option.
Edit: after looking the code again, I don't understand why you fetch the selected lang as an option. It would be easier to just to:
<select
name="EN"
id="EN"
onChange={(e) => {
localStorage.setItem("lang", e.target.value);
window.location.reload(false);
}}
>
<option selected value="en">EN</option>
<option value="th">TH</option>
</select>
Also, i would rename the "name" and "id" of the select, to something like langSelector or anything like that and not having it related to a specific option, because that could change depending on the user decision.
If you really want to just have two options (actually one), I would look at this answer as a guide and make the placeholder a conditional based on the "lang" stored on your local storage, and the option would be a conditional too, like the example I already gave:
https://stackoverflow.com/a/30525521/14492009
value = {localStorage.getItem("lang") || "EN"} - set the value props to the select.
Try this approach,
<select name="EN" id="EN"
value = {localStorage.getItem("lang") || "EN"}
onChange={(e) => {
localStorage.setItem("lang", e.target.value);
window.location.reload(false);}}>
<option value="en">EN</option>
<option value="th">TH</option>
</select>
Related
I want user to select a state just from this list :
<input list="states">
<datalist id="states">
<option value="Pendiente">Pendiente</option>
<option value="Frenada">Frenada</option>
<option value="Finalizada">Finalizada</option>
</datalist>
but also I don't want to use <select>, i know that but I want to keep the ability to type (and search among the options) but at last, one of the options must be selected.
please help me with this. I want to use it in react
You can set the value attribute of the input with the option value you want to be selected:
<input list="states" value="Pendiente">
<datalist id="states">
<option value="Pendiente">Pendiente</option>
<option value="Frenada">Frenada</option>
<option value="Finalizada">Finalizada</option>
</datalist>
I'm currently working on automation process which involves VBA and IE. Everything goes well up to date with multiple actions that my code is undertaking. The issue is when I approach a part where I have 2 dropdown lists, with second one appearing after certain selection is made in the first one.
The part of the code I have developed [which is rather crude] for this section is as follows:
Dim dropY As Object
Set dropY = IE.Document.getelementbyid("selectedListType")
dropY.Focus
Application.SendKeys "{DOWN 4}"
Do While IE.Busy
Application.Wait DateAdd("s", 2, Now)
Loop
Do Until .ReadyState = 4
DoEvents
Loop
'second list
Dim dropZ As Object
Set dropZ = IE.Document.getelementbyid("dataSet")
dropZ.Focus 'I can see that the window is being selected
Application.SendKeys ("{DOWN 1}") 'at this point the code fails
Application.SendKeys ("{ENTER}")
The Question is, how to approach the selection in both dropdown lists in order to avoid future errors? Below is the website source.
'first list
Select List Type
<select name="selectedListType" id="selectedListType" class="regular" onchange="onSubmitOrgConfig(2)">
<option value="Choice1"
>
Country Lists
</option>
<option value="Choice2"
>
Region Lists
</option>
<option value="Choice3"
>
Area Lists
</option>
<option value="Choice4"
>
Aggregated Lists
</option>
<option value="OTHER"
selected>
Other Lists
</option>
<option value="Other1"
>
Secure List
</option>
</select>
Select List
<select name="dataSet" id="dataSet" class="regular" onchange="onSubmitDataSet(6, this.value);">
<option value="">--Select--</option>
<option value="LIST_1"
>
BLACKLIST_LIST
</option>
<option value="LIST_2"
>
BLUE_LIST
</option>
<option value="LIST_3"
selected>
RED_LIST
</option>
<option value="LIST_4"
>
YELL_LIST
</option>
<option value="LIST_5"
>
PURP_LIST
</option>
<option value="LIST_6"
>
BL_LIST
</option>
<option value="LIST_7"
>
ORA_LIST
</option>
<option value="LIST_8"
>
NOCOL_LIST
</option>
<option value="LIST_999"
>
LIST_999
</option>
</select>
tl;dr;
Without a webpage to play with it is a little hard to advise on ordering of events and if everything below will work but hopefully it will help.
For example, I don't know if you have to do the Click on first list, select an item, then the javascript attached is automatically fired, or if you need to actually fire the event. Then if you have to repeat this for the second. So below, I have shown you how I would go about trying to achieve each of these actions individually so you can play with them to see what works. We can refine with feedback.
selectedListType dropdown:
You can try to click the first list with
.document.querySelector("#selectedListType").Click
You can select items from the first list with
.document.querySelector("#selectedListType [value='Choice1']")
Change Choice1 as appropriate
So marked as selected could be
.document.querySelector("#selectedListType [value='Choice1']").Selected = True
dataSet dropdown:
You can try to click the second list with
.document.querySelector("#dataSet").Click
You can select items from the second list with
.document.querySelector("#dataSet option[value='LIST_1']")
Change LIST_1 as appropriate
So marked as selected could be
.document.querySelector("#dataSet option[value='LIST_1']").Selected = True
onchange event:
Both lists have an onchange event:
You can trigger these with
.document.querySelector("#selectedListType").FireEvent "onchange"
.document.querySelector("#dataSet").FireEvent "onchange"
I have a "master dropdown menu" that contains four options (English, Spanish, Russian, Other) as the question asks their primary language.
Below this master dropdown menu contains other questions that asks similar questions and contain the same options (English, Spanish, Russian, Other).
I am wondering if it's possible to have the other dropdown menu options have the same value selected based on the 'master dropdown menu' option. So if John Smith chooses English in the master dropdown menu, the other questions will automatically have English selected in the other dropdown menus, while also allowing John to change an Answer - he may choose Spanish for question 3. I'm hoping the solution uses JavaScript or jQuery, as PHP won't be an option.
<label>What is your primary language?</label>
<select name="question1">
<option></option>
<option value="english">English</option>
<option value="spanish">Spanish</option>
<option value="russian">Russian</option>
<option value="other">Other</option>
</select>
<label>Language your spouse speaks?</label>
<select name="question2">
<option></option>
<option value="english">English</option>
<option value="spanish">Spanish</option>
<option value="russian">Russian</option>
<option value="other">Other</option>
</select>
<label>Language your children speak?</label>
<select name="question3">
<option></option>
<option value="english">English</option>
<option value="spanish">Spanish</option>
<option value="russian">Russian</option>
<option value="other">Other</option>
</select>
When selecting the value in the master dropdown menu you can set the value to the other dropdowns via JavaScript.
document.querySelector('select[name="question1"]').addEventListener('change', function(event) {
document.querySelector('select[name="question2"]').value = event.target.value;
document.querySelector('select[name="question3"]').value = event.target.value;
});
really simple solution but should work
JSFiddle
You can do this in jQuery as follows, using nextAll() to populate the other select items:
$('select').on('change', function() {
$(this).nextAll('select').val($(this).val());
});
(Note that you probably want to add a class to your selects as the above will operate on ALL select elements on the page).
Below you are adding an EventListener to to trigger when the first item is changed and assigning its value to rest of the selectors. Please update var firstDD and reminingDD valriables based on your requirement. Or better use specific IDs for each seletor so that it would be easy to understand.
$( document ).ready(function() {
var firstDD = $("select:first-child");
var reminingDD = $("select:not(:first-child)");
console.log(reminingDD);
firstDD.change(function () {
$(reminingDD).val($(firstDD).val());
});
});
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.
I use jQuery validation plugin from here. Is there a way to check if the field is NOT equal to some string?
I have a select element looking like this:
<select id="school_admin" name="school">
<option value="selector">Select...</option>
<option value="UDSM">University of Dar Es Salaam</option>
<option value="ARU">Ardhi University</option>
<option value="IFM">Institute of Finance Management</option>
</select>
As you can see, first option is 'Select...' and I need to check on submit that it's not set to this first item, but to some another actual option. How can I do that quickly?
A better way of coding your select might be to use an optgroup:
<select id="school_admin" name="school">
<optgroup label="Select a school...">
<option value="selector">Select...</option>
<option value="UDSM">University of Dar Es Salaam</option>
<option value="ARU">Ardhi University</option>
<option value="IFM">Institute of Finance Management</option>
</optgroup>
</select>
The 'select' label is then not selectable.
http://reference.sitepoint.com/html/optgroup
Why not just change the default option value to blank and leverage the metadata support by declaring a class of required on the select. Here is the demo
if($("#item").html() != "string" )
I suggest you leave Select...'s value empty value="" then simply
if ( ( sel = $('#school_admin').val() ).length ) { ... }
else { .. }
Never used the actual plugin, so you should be able to make it work with its own api
Check the value of the select element, and see if it matches the first one.
if ($('#school_admin').val() != 'selector') {
//Doesn't equal the first one, do your thing
}