I have a dropdown and I want to detect all the events, even if they are the same, when custom period is selected a modal is displayed, but I need that the user be able to use this modal all the times he want, even if is selected, here is the code:
<div class="form-group">
<select width="'100%'" ng-model="selection.date.mode"
class="form-control input-sm" ng-change="setDateMode()">
<option value="d" ng-show="visible.date.d" >Day</option>
<option value="w" ng-show="visible.date.d" >Week</option>
<option value="m" ng-show="visible.date.d" >Month</option>
<option value="y" ng-show="visible.date.d">Year to Date</option>
<option value="c" ng-show="visible.date.d" >Custom</option>
<option value="l" ng-show="visible.date.d" >Last 30 days</option>
</select>
AngularJS function:
function setDateMode() {
$scope.selection.date.mode === "c" ? clickCustomInput() : dateSelected();
}
Basically you should think twice whether you really need this. You can only achieve it by adding a click-directive to each option:
<option value="d" ng-show="visible.date.d" ng-click="setDateMode()">Day</option>
This will cause double calls of setDateMode() with each selection except the selected value stays the same. But you can‘t remove ng-change() from the select-element because when ng-click() fires the dropdown list doesn‘t know the currently selected value yet...
Related
I want to make a dropdown menu where the user should select an option before being able to continue. I tried this code with the "required" attribute but the user is still able to continue without selecting an option.
I tried the same attribute when I made an input box and there it worked fine.
<p class="line-item-property__field">
<label>Indgravering i herre ring (Valgfrit)</label><br>
<select required class="required" id="indgravering-i-herre-ring-valgfrit" name="properties[Indgravering i herre ring (Valgfrit)]">
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
</select>
</p>
You need an empty option value, otherwise the first option value is always selected anyway.
<form action="something.php">
<p class="line-item-property__field">
<label>Indgravering i herre ring (Valgfrit)</label><br>
<select required class="required" id="indgravering-i-herre-ring-valgfrit" name="properties[Indgravering i herre ring (Valgfrit)]">
<option value="">select something</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
</select>
</p>
<input type="submit" value="Submit">
</form>
I have created a dropdown menu in html. I have a reset button which resets all the value to null. But on clicking this I need to reset the dropdown menu to the first value which I gave in the field.
Please help...
The code for the dropdown is as below.
<select name="abc" id="abc">
<option value="one">One
<option value="two">Two
</select>
But on clicking Reset I am getting a blank in the dropdown list from where i have to again select either One or Two.
Instead I want it to automatically set to the value "One".
You can use add the attribute selected to the option you want to be default like this:
<select name="abc" id="abc">
<option value="one">One</option>
<option value="two" selected>Two</option>
</select>
Or add selected="selected":
<select name="abc" id="abc">
<option value="one" selected="selected">One</option>
<option value="two">Two</option>
</select>
You just need to use the selected attribute for the item that you want to be the default:
<select name="abc" id="abc">
<option value="one" selected="selected">One</option>
<option value="two">Two</option>
</select>
If you are manually performing the reset, you'll likely want to store a reference to the current selection prior to resetting them and using that to retain the previous selection, which you can access via the selectedIndex property. Depending on your use case and technology (e.g. jQuery, etc.), you can select a specific element by its index, value, or potentially other attributes.
You can add selected attributes to make default select.
<select name="abc" id="abc">
<option value="one">One
<option value="two" selected="selected">Two
</select>
With jquery
$("#abc").val("two")
use selected
here live example https://www.w3schools.com/tags/att_option_selected.asp
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>
I think you need this code in your reset jquery function.
$("#abc option:selected").prop("selected", false);
$("#abc option:first").prop("selected", "selected");
HTML select drop down by default shows first option if none of the option is selected. So, effectively you just need to clear the selected attibute for your dropdown.
function clearForm(form) {
//var $f = $(form);
//var $f = $f.find(':input').not(':button, :submit, :reset, :hidden');
//$('#msg').empty();
$('#abc option:selected').removeAttr('selected');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="abc" id="abc">
<option value="one">One
<option value="two" selected>Two
</select>
<input type='button' class="btn btn-primary" value='Reset' name='reset' onclick="return clearForm(this.form);">
I have a html form which has a dropdown consisting of a few values. If the user does not select an option and moves to the next field, I need to give an error message. I have used the required attribute but it does not fire in Chrome and Firefox.
This is my code :
<select name="gender" id="gender" style="max-width:100%" required>
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
The required attribute does not work on Chrome and Firefox. A JavaScript solution would also be good. At the time of submitting the data I am checking for empty fields but I would like to display an error message if the user does not select a value from the dropdown and moves to the next field.
Use below code, not need any script, use form tag
<!DOCTYPE html>
<html>
<body>
<form>
<select required>
<option value="">None</option>
<option value="demo">demo</option>
<option value="demo1">demo1</option>
<option value="demo2">demo2</option>
<option value="demo3">demo3</option>
</select>
<input type="submit">
</form>
</body>
</html>
Try using the onfocusout option on your select paired with some Javascript.
HTML
<select name="gender" id="gender" onfocusout="check()" style="max-width:100%" required>
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
JS
function check(){
var x = document.getElementById("gender").selectedOptions[0].label;
if(x == "Select Gender"){
alert("Please select an option.");
}
}
CodePen.io: https://codepen.io/anon/pen/XQxQgw
There's undoubtedly a more efficient way of doing this and you would need to tweak the JS to check if all fields have been completed etc. but that's my two cents in a pinch!
I have a menu page & I have few options. When I click any option, the page should redirect to a login page. Where in the login page, I have a select drop down which contains 4 options. Based on the menu selection, I need to display option which should be the default selected. That is if I click on supplier option in the menu, I need to display supplier option selected in the login page.
<a [routerLink]="['/login', {'params': 2}]"> Go </a>
So I'm just passing a parameter in URL & based on this I'm trying to select an option in the login page.
<select name="role" class="form-control input-xs input-sm input-md" [(ngModel)]="role">
<option *ngIf="{"params":"2"}" value="" disabled>Login as</option>
<option *ngIf="{"params":"3"}" value="1" selected="selected" >Supplier</option>
<option *ngIf="{"params":"4"}" value="2" selected="selected">Customer</option>
<option *ngIf="{"params":"5"}" value="3" selected="selected">OEM</option>
</select>
I'm not getting my expected result. Can somebody help me with this?
Your question is so general but I mention a sample answer. I hope it can help you.
In select tag, if you want to set a value as default you should set selected="selected" for it but in angular, you can use it as dynamic and bind it to a variable like [selected]="something === true".
If you write something like below i.e
<select name="role" class="form-control input-xs input-sm input-md">
<option value="" [selected]="myUrl === 'Login'">Login as</option>
<option value="1" [selected]="myUrl === 'TSP'">TSP</option>
<option value="2" [selected]="myUrl === 'Telemarketer'">Telemarketer</option>
<option value="3" [selected]="myUrl === 'TRAI'">TRAI</option>
</select>
Then declare myUrl in your typescript file public myUrl: string;
Now just set myUrl value to each route you would like its name to be the default.
See also Stackblitz
If the below code order status is equal then selected same will displayed in drop down.
{{ordsts.statusName}}
Here are two different datalist one with patient filenumber other with state
<input type="list" class="form-control" name="patient" list="patient-list" placeholder="Enter Patient file number">
<datalist id="patient-list">
<option value='49'>pc123</option>
<option value='48'>pc162</option>
<option value='47'>pc183</option>
<option value='45'>pc193</option>
</datalist>
<input type="list" class="form-control" name="state" list="state-list" placeholder="Enter state">
<datalist id="state-list">
<option value='delhi'>delhi</option>
<option value='mumbai'>mumbai</option>
<option value='Haryana'>Haryana</option>
<option value='Gurgaon'>Gurgaon</option>
</datalist>
When you open drop down menu for both you will notice input for patient show value & innerHTML both and inverted(on clicking it enters value inside input field). And in State input it just simply show state
What's the reason of these different behaviors?
I want to input to show just innerHTML of option like state input and have different data in value & innerHTML
While I cannot answer your exact question, I.E. "What is the reason of this", I can tell you why it happens.
As a result of the intended functionality of the program running the code (whichever web browser you're running) the .innerHTML attribute is shown to the right of the option element only if the .innerHTML value and the .value value differ.
Here is a fiddle showing this in action, I've changed the first option to have the same .innerHTML value and .value value as an example: https://jsfiddle.net/87h3bcwd/
Further Reading on the Datalist Element that I found useful in answering this question: http://www.w3.org/TR/html5/forms.html#the-datalist-element
Code:
<input type="list" class="form-control" name="patient" list="patient-list" placeholder="Enter Patient file number">
<datalist id="patient-list">
<option value='49'>49</option>
<option value='48'>pc162</option>
<option value='47'>pc183</option>
<option value='45'>pc193</option>
</datalist>
<input type="list" class="form-control" name="state" list="state-list" placeholder="Enter state">
<datalist id="state-list">
<option value='delhi'>delhi</option>
<option value='mumbai'>mumbai</option>
<option value='Haryana'>Haryana</option>
<option value='Gurgaon'>Gurgaon</option>
</datalist>
Using <datalist> doesn't work like <select>. It always displays the value attribute and doesn't let you change it by default.
This answer shows how to display different text if you need to - it consists of using a data- attribute and processing it with JavaScript:
Show datalist labels but submit the actual value