I have a dropdown with 5,6 options that it can have:
["Apple","Banana","Watermelon","Pears","Mango"]
Also in the Array data I receive the the value as shown below:
const data =[{fruit:"Watermelon"}, {fruit:"Mango"},...]
When I write the static options like these (Here my First option is the value coming from data and rest are available options from the above array) :
data.map((v,index)=>{
<option value={data[v]}>{data[v]}</option>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Watermelon">Watermelon</option>
<option value="Pears">Pears</option>
<option value="Mango">Mango</option>}
So there is a repitetion in the dropdown List we see in the UI , Like for the fist data ({fruit:"Watermelon"})object case we will see "Watermelon" 2 times and similarly for second data object ({fruit:"Mango"}) we will see Mango twice.
How do we map the options so that we see the option from the data as first selected and the list on clicking the dropdown.
Image of codesandbox :
I tried these:
<option value={data[v]}>{data[v]}</option> //value from data
{ColData.filter((item) => item!==data[v]).map((i,idx)=> //rest of options
<option key={idx} >{i}</option>)}
Related
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>
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 am using jquery.uix.multiselect by yanickrochon, API documentation here:
API Documentation
<select id="countries" class="multiselect" multiple="multiple" name="countries[]">
<option value="AFG">Afghanistan</option>
<option value="ALB">Albania</option>
<option value="DZA">Algeria</option>
<option value="AND">Andorra</option>
<option value="ARG">Argentina</option>
<option value="ARM">Armenia</option>
<option value="ABW">Aruba</option>
<option value="AUS">Australia</option>
<option value="AZE">Azerbaijan</option>
<option value="BGD">Bangladesh</option>
<option value="BLR">Belarus</option>
<option value="BEL">Belgium</option>
</select>
And JS:
$(".multiselect").multiselect(
{availableListPosition:'left', sortable: true }
);
When I select a country, it goes to the selected panel sorted, I enabled sortable so I can drag and sort manually. My question is: is there a way to append the newly selected country to the bottom of the selected list? instead of automatically sorted along with the selected list.
The one option I see sortMethod can disable the sorting, but would like the un-selected list to be sorted for easy find. Does anyone with experience with this?
In sort, I am looking to keep the un-selected list sorted while items in the selected list is appended to the bottom.
I have a DropDownList whose values i want to group by category.
What are the best practices and maybe some code samples that show proper submission of form in ASP.NET MVC 3 that contains options under different categories/groups.
Sample
In the example above, i want the category to be collapsible and not display a radio button. Also when clicked, the category should expand to display the available radio button options under that category that allow selection of only one option. I'm not interested in tracking the value of the category, what i want to get when the form is submitted is the value of the selected option under a parent category.
Has any one done some thing similar or related in MVC 3 & jQuery?
You can do something like that using the in HTML.
<select>
<optgroup label="Parent 1">
<option value="1">sub category 1</option>
<option value="2">sub category 2</option>
</optgroup>
<optgroup label="Parent 2">
<option value="3">sub category 1</option>
<option value="4">sub category 2</option>
</optgroup>
</select>
Replace the data with your modal data.
So i have these options.
<option value="bentley">Bentley</option>
<option value="ferrari">Ferrari</option>
<option value="honda">Honda</option>
<option value="toyota">Toyota</option>
<option value="peugeot">Peugeot</option>
<option value="citroen">Citreon</option>
If i click on honda, the honda cars are displayed. IF toyota then toyotas..and so on.
I would like to make an option, where i only reference the luxury cars. Just do not know how to make it work.
<option value"ferrari:bentley">Luxury cars</option>
Any ideas?
Note: It can help others, who would like to reference more than one value in an option. As I was searching around for 1.30 hours there is not much out there.
Thank you in advance
You could use an optgroup
JSfiddle
<select name="carss">
<optgroup label="Luxury cars">
<option>Ferrari</option>
<option>Bentley</option>
<option>Rolls Royce</option>
</optgroup>
<optgroup label="Others">
<option>Honda</option>
<option>Ford</option>
<option>Toyota</option>
</optgroup>
</select>
For multiple values in option tag use below code
<option value="{'num_sequence':[0,1,2,3]}">Option one</option>
<option value="{'foo':'bar','one':'two'}">Option two</option>
First one is using array and second one is using Object.
Refer this for more info.
You should do like this
create a Table with Car names and its type like
Luxury,Sedan,etc.
Allow users to select cars based on types or car name.(dont combine
both)
Then when user select Cars by type you need to get cars from first
table corresponding to that class name