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>
Related
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
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 am working with laravel and in my form I am grab data to select input using some variable,
<label for="exampleFormControlSelect1">Vehicle Category</label>
<select name="c_id" id="c_id" class="form-control input dynamic" data-dependent="b_id" >
#foreach($model_list as $model)
<option value="{{$categories->id}}">{{$categories->id}}</option>
#endforeach
</select>
Now I am going to hide this select input and this select input is depend to other select inputs values. So, I need select automatically drop down values to above select input using some technology. How can I do this? (currently it should select manually using drop down list)
Add selected="selected" to the first option.
<select name="c_id" id="c_id" class="form-control input dynamic" data-dependent="b_id" >
{{$i = 1;}}
#foreach($model_list as $model)
<option value="{{$categories->id}}" {{($i == 1) ? "selected='selected' : ''"}}>{{$categories->id}}</option>
$i++;
#endforeach
If you need to select the first option of a select, you can do it in three ways
select.options
select.values
select.selectedIndex
For example having this form that contains the select that probably rendered blade
<form name="formName">
<label>Categories</label>
<select name="c_id">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>
You could try
const category = document.forms.formName.c_id;
console.log(category.value)
console.log(category.options[0].value)
console.log(category.options[category.options.selectedIndex].value)
This will show on the console:
'1'
'1'
'1'
Visit this link to try the example
To read more about select and some useful options visit this article in select and option section
Now, probably I misinterpret your question, in your comment you mention that this select is dependent on another, this is not clear to me, does it have any relation to the data attribute? If this is the case, please develop your question
I am facing some problem in drop down of angular js. Below is the html code
<select class="form-control" ng-init="projectName = options[0]" ng-model="projectName" name="projectName" ng-options="project.name for project in projectsList track by project.id" ng-class="{'submitted': submitted}" ng-selected="projectName" required>
<option value="">Select Project</option>
</select>
all the things coming fine.
But what i want is after selecting value from drop down we submit the form and in success am getting the value what i have selected. Now i want to set this value for the drop down, how to do it ?
In jquery it works
$("dropdown").val('successCallBackValue');
but in angular how to do it
After the sucess of the form submit just set the value in the dropdown model value as,
$scope.projectName = yourValue; // whatever selected value you are getting.
<select class="form-control" ng-init="projectName = options[0]" ng-model="projectName" name="projectName" ng-options="project.name for project in projectsList track by project.id" ng-class="{'submitted': submitted}" required>
<option value="">Select Project</option>
</select>
Imagine that I have a fictional website where a user can sign for some courses. Let's say that there are 3 different kinds of courses: mathematics, languages and biology. User can choose multiple courses in one form.
I would like to have a form where a user chooses if he wants a course from mathematics or languages or biology and then he can choose the one he wants.
User will select what kind of course he wants,
<select type="text" name="course">
<option value="0">mathematics</option>
<option value="1">languages</option>
<option value="2">biology</option>
</select>
and according to what user selected there would be another select with specific courses of that kind. So if user chooses mathematics, next select would be filled with courses from mathematics
<select type="text" name="topic">
<option value="0">algebra</option>
<option value="0">calculus</option>
...
</select>
In the end there would be a button which will recreate this so the user can add as many courses to his application as he wants.
Can you give me any hints how to do this? Or is there some better way, how to do this?
Thanks
Some pseudo-code / diagram which might help
// Display Main Options (Math, Lang, Bio)
<select type="text" name="course">
<option value="math">mathematics</option>
<option value="lang">languages</option>
<option value="bio">biology</option>
</select>
// OnChange of the Main Options, check which option is checked
// Display Secundairy Options menu according to the chosen Main Option
// Note the IDs of these selects and the values of the Main Options
<select type="text" name="subCourse" id="math">
<option value="SimpleAlg">Simple Algebra</option>
<option value="AdvAlg">Advanced Algebra</option>
<option value="xx">...</option>
</select>
// OR
<select type="text" name="subCourse" id="lang">
<option value="BasEng">Basic English</option>
<option value="AdvEng">Advanced English</option>
<option value="xx">...</option>
</select>
// OR
<select type="text" name="subCourse" id="bio">
<option value="xx">...</option>
</select>
// Display button which adds the selected course to a list
// OnClick on the button, update a shown list of selected courses
<ul id="selectedCourses">
<li id="BasEng">Basic English [<a onclick="removeCourse()">X</a>]</li>
</ul>