I have this:
<select
onInput={(e) => onTyping(e.target.name, e.target.value)}
name="site"
id="site"
onChange={handleInputChange}
>
<option value={myData.site}>{myData.site}</option>
<option value="MAR">MARKHAM</option>
<option value="OTT">OTTAWA</option>
</select>
and basically what it is doing is just displaying the options for the locations, plus the one that is already selected. and what I need is to be is if myData.site == mar then display Ottawa, and Markham as the selected option, and vice versa for Ottawa. I tried to do a script inside the react return, but it doesn't like it. how can I do this?
You can conditionally render an element using ternary or logical operators inside of curly brackets
<option value={myData.site}>{myData.site}</option>
{myData.site == 'mar' && <option value="MAR">MARKHAM</option>}
{myData.site == 'ott' && <option value="OTT">OTTAWA</option>}
Related
I have this select element with multiple option inside it:
<select class="form-control" name="genere1">
<option value="Alternative / Indie">Alternative / Indie</option>
<option value="Classical Music">Classical Music</option>
<option value="Country">Country</option>
<option value="Easy Listening">Easy Listening</option>
<option value="Electronic / Dance">Electronic / Dance</option>
<option value="Hip Hop / Rap">Hip Hop / Rap</option>
<option value="Jazz">Jazz</option>
<option value="Latin / Reggaeton">Latin / Reggaeton</option>
<option value="Other">Other</option>
<option value="Pop">Pop</option>
<option value="Reggae / Dancehall">Reggae / Dancehall</option>
<option value="Rock">Rock</option>
<option value="Spiritual">Spiritual</option>
</select>
for every option element you see up here i have another select element. Basically, I have a series of music genres listed in a select element and, under it, the subgenres related to every single one of the "master genres".
What I would like to do is make the subgenres visible only when the relative genre is selected. For example, if the user selects "Pop", I would like to show them the related select field containing the Pop subgenres.
My HTML markup is actually generated by a WordPress plugin and I am not able to edit it, unfortunately. This being said, I can't declare custom values inside my HTML because they are automatically generated by the plugin. I am actually looking for a simple solution, something like: if 'master genre' is 'rock', then display 'rock' input subgenres. How could I do something like this?
You could link two selects and display corresponding subgenres using .dataset.option. I'm afraid you won't get around a little JavaScript here.
Here's a working example for your particular use-case:
const genre = document.querySelector("#genre");
const subgenre = document.querySelector("#subgenre");
const subOptions = subgenre.querySelectorAll("option");
const setValue = (newValue) => {
subgenre.innerText = null;
for (let i = 0; i < subOptions.length; i++)
subOptions[i].dataset.option === newValue &&
subgenre.appendChild(subOptions[i]);
};
setValue(genre.value);
<select id="genre" onchange="setValue(this.value)">
<option value="Metal">Metal</option>
<option value="Rock">Rock</option>
</select>
<select id="subgenre">
<option value="Metal" data-option="Metal">Thrash Metal</option>
<option value="Metal" data-option="Metal">Death Metal</option>
<option value="Metal" data-option="Metal">Black Metal</option>
<option value="Rock" data-option="Rock">Classic Rock</option>
<option value="Rock" data-option="Rock">Hard Rock</option>
</select>
I have ENUMS as listed below
export declare enum UserStatus {
NEW = "NEW",
REGISTERED = "REGISTERED"
}
How do i ensure that i can use this dynamic way as dropdown items of select tag. I searched online at several sites and didnt find a suitable answer. Can someone please help.
Currently i am hardcoding this way.
<select value={selectedUserStatus} onChange={onUserStatusSelect}>
<option
aria-selected="true"
key={UserStatus.NEW}
value={UserStatus.NEW}
>
{UserStatus.NEW}
</option>
<option
aria-selected="true"
key={UserStatus.REGISTERED}
value={UserStatus.REGISTERED}
>
{UserStatus.REGISTERED}
</option>
</select>
You can also use:
<select value={selectedUserStatus} onChange={onUserStatusSelect}>
Object.values(UserStatus).map(value =>
<option
aria-selected="true"
key={value]}
value={value}
>
{value}
</option>
)
</select>
If it's JSX syntax you should be able to replace the mark-up inside of the element with an array of JSX elements like so:
<select value={selectedUserStatus} onChange={onUserStatusSelect}>
Object.keys(UserStatus).map(key => (
<option
aria-selected="true"
key={UserStatus[key]}
value={UserStatus[key]}
>
{UserStatus[key]}
</option>
)
)
</select>
I am creating a template for showing Select fields in my app. However I have 4 different types of select field. value = id, value = name, value = static_id and value = static_name (it's complicated...).
I plan to migrate these to ngOptions if possible in the future, but for now I am attempting to have a single select template, that will handle all 4 types of field.
I currently use an ng-if to show the different 'static' code for a select, but this creates a lot of code that I want to reduce into this single template.
Here's some code:
// shows a basic select field where option value = id
<div ng-if="field.type=='select'" class="form-group">
<select-field></select-field>
</div>
// shows a basic select field where option value = name
<div ng-if="field.type=='select_name'" class="form-group">
<select-field></select-field>
</div>
// shows a basic select field where option value = static_id
<div ng-if="field.type=='select_static_id'" class="form-group">
<select-field></select-field>
</div>
// shows a basic select field where option value = static_name
<div ng-if="field.type=='select_static_name'" class="form-group">
<select-field></select-field>
</div>
Here, all the field attributes are identical, except for the generated options. Hence why I want to template this.
I am attempting to have this single template have another ng-if inside that will detect the field type, from the JSON it reads, and then change the options displayed accordingly, like this (2 of the 4 examples shown):
<select
name={{field.name}}
class="form-control form-field {{relationshipUrl}}"
id={{field.name}}
data-is-autofocus={{field.focus}}
data-selectreq={{field.rules.selectreq}}
data-showhide={{field.rules.showhide}}
>
<option value="" selected>Please select...</option>
<span ng-if="field.type=='select'">
<option
value={{option.id}}
ng-repeat="option in cache[field.relationshipURL] | orderBy:'name || firstName'"
ng-selected="formData[field.name] == option.id">
{{option.name || option.firstName}}
</option>
</span>
<span ng-if="field.type=='select_static_name'">
<option
value={{option.name}}
ng-repeat="option in cache[field.relationshipURL] | orderBy:'name'"
ng-selected="formData[field.name] == option.name">
{{option.name}}
</option>
</span>
</select>
Possibly horrible code to use a span within the select, but that's why I am coming to you good people. Currently this works in that it shows the correct options, however, it shows the options listed out twice, and I assume it will list them 4 times once all the option types are included. I hope that makes sense. Thanks in advance.
Well no sooner had I posted, the answer was blindingly obvious. Instead of the above approach by removing the span and putting the ng-if on the <option> instead fixed the issue and it works perfectly!
<select
name={{field.name}}
class="form-control form-field {{relationshipUrl}}"
id={{field.name}}
data-is-autofocus={{field.focus}}
data-selectreq={{field.rules.selectreq}}
data-showhide={{field.rules.showhide}}
>
<option value="" selected>Please select...</option>
<option ng-if="field.type=='select'"
value={{option.id}}
ng-repeat="option in cache[field.relationshipURL] | orderBy:'name || firstName'"
ng-selected="formData[field.name] == option.id">
{{option.name || option.firstName}}
</option>
<option ng-if="field.type=='select_name'"
value={{option.name}}
ng-repeat="option in cache[field.relationshipURL] | orderBy:'name'"
ng-selected="formData[field.name] == option.name" >
{{option.name}}
</option>
<option ng-if="field.type=='select_static_id'"
value={{option.id}}
ng-repeat="option in cache[field.relationshipURL] | orderBy:'name'"
ng-selected="formData[field.name] == option.id" >
{{option.name}}
</option>
<option ng-if="field.type=='select_static_name'"
value={{option.name}}
ng-repeat="option in cache[field.relationshipURL] | orderBy:'name'"
ng-selected="formData[field.name] == option.name">
{{option.name}}
</option>
</select>
Thank you anyway #charlietfl very quick response.
I'm a bit late for the answer, but I managed to make a working JSFIDDLE of what I hoped you tried to accomplish.
I factorized your code into a single select and added another select to show you how to display either only one, or all of them.
<div>
<select ng-model="selector">
<option value=""></option>
<option value="">Show everything</option>
<option ng-repeat="option in Options" value="{{option.type}}">{{option.type}}</option>
</select>
</div>
<div ng-repeat="option in Options" ng-show="$parent.selector == option.type || $parent.selector == ''">
{{option.type}}
<select>
<option ng-repeat="choice in option.choices" value="{{choice}}">{{choice}}</option>
</select>
</div>
And the data :
$scope.Options = [
{type:"id", choices:["0", "1", "2"]},
{type:"name", choices:["John", "Doe", "Smith"]},
{type:"static_id", choices:["3", "4", "5"]},
{type:"static_name", choices:["Static 1", "Static 2", "Static 3"]},
];
I am checking value on radio and select drop down using jquery. How can check both elements value in a if condition using jquery ? I tried this way but its not working for me:
$("#filterresult").click(function(){
if($('#filter_deductible').val()=="id_0" && $('#trip_type_filter_no').val()=="no")
{
//some code here
}
I know I can't use && in jquery code I have to use multiple selector but I don't know how to use it. Any suggestions please ?
Here is my html:
<select id="filter_deductible" name="filter_deductible">
<option value="">Select Deductible</option>
<option value="id_0">0 Only</option>
<option value="id_0_250">0-250</option>
<option value="id_250_1000">250-1000</option>
<option value="id_1001">1000 and Higher</option>
<option value="All Deductibles">All Deductibles</option>
</select>
AND
<input type="radio" id="trip_type_filter_no" name="trip_type_filter_no" value="no" /> No
Calling function using a button:
<input type="button" name="filterresult" id="filterresult" class="newquote" value="Filter Result" />
First radio buttons that should be linked should have the SAME name, you have different names. That means you can select both of them.
Second, the val() will always return the value. You want to check to see if it is selected.
if ($('#filter_deductible').val()=="id_0" && $('#trip_type_filter_no').is(":checked"))
I am creating a pulldown menu that pushes the user to a selected url. In the list i have several values that are set at 0 which i use for headers in the list. I have set them to 0 so they do nothing.
This works for the first one in the list which has a value of 0 but the others that do have a value of 0 still redirects the browser to a new website with the same domain and /0 at the end? What am i missing?
<select onchange="if (this.selectedIndex > 0) document.location.href=this.value;">
<option value="0" selected="selected">More...</option>
<option value="0">----- Locations -----</option>
<option value="http://www.location1.com/">location1</option>
<option value="http://www.location2.com/">location2</option>
<option value="http://www.location3.com/">location3</option>
<option value="0">----- Other Locations -----</option>
<option value="http://www.olocation1.com/">olocation1</option>
<option value="http://www.olocation2.com/">olocation2</option>
<option value="http://www.olocation3.com/">olocation3</option>
</select>
change your code to:
<select onchange="if (this[this.selectedIndex].value !== '0') document.location.href=this.value;">
<option value="0" selected="selected">More...</option>
<option value="0">----- Locations -----</option>
<option value="http://www.location1.com/">location1</option>
<option value="http://www.location2.com/">location2</option>
<option value="http://www.location3.com/">location3</option>
<option value="0">----- Other Locations -----</option>
<option value="http://www.olocation1.com/">olocation1</option>
<option value="http://www.olocation2.com/">olocation2</option>
<option value="http://www.olocation3.com/">olocation3</option>
</select>
demo: http://jsfiddle.net/pratik136/kWHXX/
Why?
Your code:
onchange="if (this.selectedIndex > 0) document.location.href=this.value;"
was checking for the index of the selected option in the list. Now because list indices start from 0, you were getting expected results when the first (or 0th index) item was selected. But all other items passed the selectedIndex > 0 test and got redirected.
using
onchange="if (this[this.selectedIndex].value !== '0') document.location.href=this.value;"
basically checks for the value of the selected index, and if the value !== '0', it redirects to it.
You're redirecting them to the url 0, which it interprets as /0. You probably want to do a check to make sure that the value is not "0", by using something like this.value !== "0".