I want to change the select option selected to another value.
I.e.,
<select id="myid">
<option value="1" selected="selected">1 </option>
<option value="2" >2 </option>
<option value="3" >3 </option>
<option value="4" >4 </option>
</select>
I have to trigger a change in this select and select the 3rd option I have the value how can I do it.?
I am adding an option each time by a function and I want after each addition of the option, I want it to be selected to do further activities.
To change by index
<input type="button" value="Change Select" onclick="changeSelect(3)" />
function changeSelect(x) {
document.frm.myid.selectedIndex = x-1;
}
to change by value
<input type="button" value="Change Select" onclick="changeSelect1(3)" />
function changeSelect1(x) {
var myid = document.getElementById('myid');
var st = myid.options;
for(var i=0; i<st.length; i++) {
if(st[i].value == x) {
myid.selectedIndex = i;
}
}
}
function Change() {
for (i = 0; i < document.getElementById('ddStream').options.length; i++) {
if (document.getElementById('ddStream').options[i].value == 1)
document.getElementById('ddStream').selectedIndex = i;
}
alert(document.getElementById('ddStream').selectedIndex);
return false;
}
<select id="ddStream" onchange="return Change()">
<option value="">EEE</option>
<option value="">ECE</option>
<option value="">CSE</option>
<option value="1">E&I</option>
</select>
This is the basic syntax.. The other things that you have mentioned will go by the logic u write.. Eg, to select the last option that u add dynamically,
document.getElementById('ddStream').selectedIndex = document.getElementById('ddStream').options.length -1
selected="selected" selects the option you want, just put it on the 3rd option tag
E.g.
<select id="myid">
<option value="1">1 </option>
<option value="2">2 </option>
<option value="3" selected="selected">3 </option>
<option value="4">4 </option>
</select>
Related
I am using a form to insert the value to the database.I want the stationerytype field to insert only the option value.My code allows user to insert the typed value.i dont want to insert this typed value.
There are two datalist for the option and the value of datalist depends upon the value selected on 'purpose' field. My code is
<select type="text" name="purpose" id="purpose" class="form-control" onchange="random()" required />
<option></option>
<option value="Meeting">Meeting</option>
<option value="Departmental">Departmental</option>
</select>
</div>
<script>
function random() {
document.querySelector('[name="stationerytype[]"]').value = ""
var a = document.getElementById('purpose').value;
if (a === "Meeting") {
var datalist = "datalist1";
} else if (a === "Departmental") {
var datalist = "datalist2";
}
document.querySelector('[name="stationerytype[]"]').setAttribute("list", datalist)
}
</script>
<td><input type="text" name="stationerytype[]" id="stationerytype" class="form-control" autocomplete="off" required>
<datalist id="datalist1">
<option value=""></option>
<option value="MEETING PEN">MEETING PEN</option>
<option value="NOTEPAD">NOTEPAD</option>
<option value="PLASTIC FOLDER">PLASTIC FOLDER</option>
</datalist>
<datalist id="datalist2">
<option value=""></option>
<option value="A4 GREEN REAM">A4 GREEN REAM</option>
<option value="A4 WHITE REAM">A4 WHITE REAM</option>
<option value="CELLOTAPE(BROWN)">CELLOTAPE(BROWN)</option>
</datalist>
</td>
Refering to this post, you have to set the pattern attribute of your input. If the pattern has been set, if the user select any other option other than the value from data list, the input will be invalid.
If the input is not a valid one, you can clear the value of the input on change event.
Working fiddle
function random() {
const input = document.querySelector('[name="stationerytype[]"]');
input.value = ""
var a = document.getElementById('purpose').value;
if (a === "Meeting") {
var datalist = "datalist1";
} else if (a === "Departmental") {
var datalist = "datalist2";
}
const options = Array.from(document.getElementById(datalist).options).map(option => option.value);
input.setAttribute("list", datalist);
input.setAttribute("pattern", options.join('|'));
}
function ondataListSelect() {
const input = document.getElementById('stationerytype');
if (!input.validity.valid) {
input.value = '';
}
}
<select type="text" name="purpose" id="purpose" class="form-control" onchange="random()" required >
<option></option>
<option value="Meeting">Meeting</option>
<option value="Departmental">Departmental</option>
</select>
<td>
<input type="text"
name="stationerytype[]"
id="stationerytype"
class="form-control"
onchange="ondataListSelect()"
autocomplete="off"
required>
<datalist id="datalist1">
<option value=""></option>
<option value="MEETING PEN">MEETING PEN</option>
<option value="NOTEPAD">NOTEPAD</option>
<option value="PLASTIC FOLDER">PLASTIC FOLDER</option>
</datalist>
<datalist id="datalist2">
<option value=""></option>
<option value="A4 GREEN REAM">A4 GREEN REAM</option>
<option value="A4 WHITE REAM">A4 WHITE REAM</option>
<option value="CELLOTAPE(BROWN)">CELLOTAPE(BROWN)</option>
</datalist>
</td>
Please can someone help me - I want the second drop-down to change based on a selection from the first option and also the third drop-down to change based on a second selected option. Here is my html:
<select name="selectLevel" id="selectLevel" >
<option value="">-- select a level --</option>
<option value="jhs">Junior High School</option>
<option value="shs">Senior High School</option>
<option value="tertiary 3">Tertiary</option>
</select>
<select name="selectSubject" id="selectSubject">
<option value=""> -- select a subject -- </option>
<option data-value="jhs" value="english">English Language</option>
<option data-value="shs" value="maths">Mathematics</option>
<option data-value="tertiary" value="IT">Business Math</option>
</select>
<select name="selectTopic" id="selectTopic" >
<option value=""> -- select a topic -- </option>
<option data-value="jhs">Spelling</option>
<option data-value="shs">Matrix</option>
<option data-value="tertiary">Calculus</option>
</select>
And here is my script:
$(document).ready(function(){
$('#jhs').change(function(){
if($(this).data('options') == undefined){
$(this).data('options', $('#selectSubject option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[data-value=' + id + ']');
$('#selectSubject').html(options).show();
});
$('#selectSubject').change(function(){
if($(this).data('options') == undefined){
$(this).data('options', $('#selectTopic option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[data-value=' + id + ']');
$('#selectTopic').html(options).show();
});
});
Thank You very much!
I change a little bit to make it easier.
When we change the first select, it will check the second select's option and change its value.
After that, it will trigger the second select's change event and so on.
$(document).ready(function() {
// Save all selects' id in an array
// to determine which select's option and value would be changed
// after you select an option in another select.
var selectors = ['selectLevel', 'selectSubject', 'selectTopic']
$('select').on('change', function() {
var index = selectors.indexOf(this.id)
var value = this.value
// check if is the last one or not
if (index < selectors.length - 1) {
var next = $('#' + selectors[index + 1])
// Show all the options in next select
$(next).find('option').show()
if (value != "") {
// if this select's value is not empty
// hide some of the options
$(next).find('option[data-value!=' + value + ']').hide()
}
// set next select's value to be the first option's value
// and trigger change()
$(next).val($(next).find("option:first").val()).change()
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selectLevel" id="selectLevel">
<option value="">-- select a level --</option>
<option value="jhs">Junior High School</option>
<option value="shs">Senior High School</option>
<option value="tertiary">Tertiary</option>
</select>
<select name="selectSubject" id="selectSubject">
<option value=""> -- select a subject -- </option>
<option data-value="jhs" value="english">English Language</option>
<option data-value="shs" value="calculus">Calculus</option>
<option data-value="tertiary" value="IT">Info Tech</option>
</select>
<select name="selectTopic" id="selectTopic">
<option value=""> -- select a topic -- </option>
<option data-value="calculus">Calculus</option>
<option data-value="calculus">Matrix</option>
<option data-value="english">Basic English</option>
<option data-value="english">Basic English 2</option>
<option data-value="IT">Info Tech Studies</option>
<option data-value="IT">Info Tech Studies 2</option>
</select>
i got it u would add script CDN code in your code
https://www.w3schools.com/jquery/jquery_get_started.asp
just above your script code
Like this :
<select name="selectLevel" id="selectLevel" >
<option value="">-- select a level --</option>
<option value="jhs">Junior High School</option>
<option value="shs">Senior High School</option>
<option value="tertiary 3">Tertiary</option>
<select name="selectSubject" id="selectSubject">
<option value=""> -- select a subject -- </option>
<option data-value="jhs" value="english">English Language</option>
<option data-value="shs" value="maths">Mathematics</option>
<option data-value="tertiary" value="IT">Business Math</option>
<select name="selectTopic" id="selectTopic" >
<option value=""> -- select a topic -- </option>
<option data-value="jhs">Spelling</option>
<option data-value="shs">Matrix</option>
<option data-value="tertiary">Calculus</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#selectLevel').change(function(){
if($(this).data('options') == undefined){
$(this).data('options', $('#selectSubject option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[data-value=' + id + ']');
$('#selectSubject').html(options).show();
});
$('#selectSubject').change(function(){
if($(this).data('options') == undefined){
$(this).data('options', $('#selectTopic option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[data-value=' + id + ']');
$('#selectTopic').html(options).show();
});
});
You can do this by Ajax request.
[HTML]
Now that I have three options in the drop down button:
<select id='campus' class="form-control">
<option value="Z010">Campus1</option>
<option value="Z020">Campus2</option>
<option value="Z040" selected>Campus3</option>
<option value="?????">- All Campuses-</option>
</select>
Now that i want to add a choice of "All Campus" in the drop down menu, which includes all students from all campus, what should i do ?
I can not do the following because i need "AND" within the bracket, not "OR":
<option value="{'Z010', 'Z020', 'Z040'}">All</option>
Any suggestions?
Thank you very much!!
Here is one approach, using a <select multiple> and a few lines of javascript:
var campusOptions = document.getElementsByTagName('option');
var allCampuses = document.querySelector('[value="all-campuses"]');
function selectAllCampuses() {
if (allCampuses.selected === true) {
for (var i = 0; i < (campusOptions.length - 1); i++) {
campusOptions[i].selected = true;
allCampuses.selected = false;
}
}
}
allCampuses.addEventListener('click', selectAllCampuses, false);
<select id="campus" class="form-control" multiple>
<option value="Z010">Campus1</option>
<option value="Z020">Campus2</option>
<option value="Z040" selected>Campus3</option>
<option value="all-campuses">- All Campuses -</option>
</select>
I have three dropdowns:-
<form name="myForm" data-ng-submit="save(myForm.$valid)"novalidate="novalidate">
<label>1st</label>
<select ng-model="a.value[0]">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<label>2nd</label>
<select ng-model="a.value[1]">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<label>3rd</label>
<select ng-model="a.value[2]">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<button type="submit" class="btn btn-warning"><i class="fa fa-save"></i>
Save</button>
</form>
What I want is user select unique value in each dropdown, if not get notified.
$scope.a.value = [];
scope.func = function () {
if (_.uniq(scope.a.value).length !== scope.a.value.length) {
scope.notify("error", "Please set unique values");
}
};
I used the above code but didn't get it right? Please tell me what I am doing wrong? or give me a possible solution.
Also what I want is that it is not saved if the values are not unique. What validation should I apply and where?
Use ng-change="uniqCheck()" in each select directive:
<select ng-model="a.value[0]" ng-change="uniqCheck()">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
Use in the controller:
$scope.uniqCheck = function(){
$log.log('this is $scope.a', $scope.a);
if (_.uniq($scope.a.value).length !== $scope.a.value.length) {
// $scope.notify("error", "Please set unique values");
$window.alert("error - Please set unique values")
}
}
this should work as #Selva.K comment
Your code should work fine - _.uniq returns an array with duplicate values removed - so if you compare the length of the result of _.uniq with the result of the unmodified array you can determine if the values are all unique.
The step you're missing is that you are not calling your validation - as pointed out by Anandapriyan S.D.
You need to make sure that every time you change your select you call the function that checks the uniqueness.
<div ng-controller="Ctrl">
<label>1st</label>
<select ng-model="a.value[0]" ng-change="uniqCheck()">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<label>2nd</label>
<select ng-model="a.value[1]" ng-change="uniqCheck()">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<label>3rd</label>
<select ng-model="a.value[2]" ng-change="uniqCheck()">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
</div>
function Ctrl($scope) {
// not sure why you are nesting values onto a, unless a has more important information
// you could just use $scope.a = []; and then use $scope.a[0] ...
$scope.a = {};
$scope.a.value = [];
$scope.notify = function(error, message) {
alert(error + ': ' + message);
}
$scope.uniqCheck = function() {
if (_.uniq($scope.a.value).length !== $scope.a.value.length) {
$scope.notify("error", "Please set unique values");
}
};
}
https://plnkr.co/edit/UARPwYWQGjJux9FrQwFc?p=preview
Hellloooooo...
I have two <select> inputs like this
<select id="sel1">
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="sel2">
//if 'a' is selected above,
//<option>apple</option>, <option>airplane</option>
//if 'b' is selected above,
//<option>banana</option>, <option>book</option>
</select>
And I want to list different sets of options according to the selection in sel1.
I could get the selected value using onchange attribute like this:
<select id="sel1" onchange="giveSelection(this)">
<script type="text/javascript">
function giveSelection(sel) {
var selected = sel.value;
}
</script>
But I can't come up with a way to use this value to output different select options in sel2.
Help please!
You almost got there. As you already got sel1's value, the rest is to filter options for sel1 based on the value.
var sel1 = document.querySelector('#sel1');
var sel2 = document.querySelector('#sel2');
var options2 = sel2.querySelectorAll('option');
function giveSelection(selValue) {
sel2.innerHTML = '';
for(var i = 0; i < options2.length; i++) {
if(options2[i].dataset.option === selValue) {
sel2.appendChild(options2[i]);
}
}
}
giveSelection(sel1.value);
<select id="sel1" onchange="giveSelection(this.value)">
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="sel2">
<option data-option="a">apple</option>
<option data-option="a">airplane</option>
<option data-option="b">banana</option>
<option data-option="b">book</option>
</select>
I drummed up a version that can handle an unlimited amount of select combo dropdown list boxes, using jQuery. Hope this is useful to someone.
function jq_ChainCombo(el) {
var selected = $(el).find(':selected').data('id'); // get parent selected options' data-id attribute
// get next combo (data-nextcombo attribute on parent select)
var next_combo = $(el).data('nextcombo');
// now if this 2nd combo doesn't have the old options list stored in it, make it happen
if(!$(next_combo).data('store'))
$(next_combo).data('store', $(next_combo).find('option')); // store data
// now include data stored in attribute for use...
var options2 = $(next_combo).data('store');
// update combo box with filtered results
$(next_combo).empty().append(
options2.filter(function(){
return $(this).data('option') === selected;
})
);
// now enable in case disabled...
$(next_combo).prop('disabled', false);
// now if this combo box has a child combo box, run this function again (recursive until an end is reached)
if($(next_combo).data('nextcombo') !== undefined )
jq_ChainCombo(next_combo); // now next_combo is the defining combo
}
// quick little jquery plugin to apply jq_ChainCombo to all selects with a data-nextcombo on them
jQuery.fn.chainCombo = function() {
// find all divs with a data-nextcombo attribute
$('[data-nextcombo]').each(function(i, obj) {
$(this).change(function (){
jq_ChainCombo(this);
});
});
}();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--
// select boxes...
1) first combo simply add data-nextcombo (class, id, etc) and onchange function
2) next combo that is controlled by first, add data-nextcombo (add onchange="jq_ChainCombo(this)" if not using the jquery plugin) and disable to hide entire option list until required.
3) last combo, don't bother adding a data-nextcombo to it
// data...
1) data should have a data-id, and data-option tag
2) data-option should be -1 if it is the root combo box, or if a child combo, the data-option should be the data-id of the parent.
-->
<!-- parent -->
<select class="combo-a" data-nextcombo=".combo-b">
<option value="1" data-id="1" data-option="-1">Bob's Coffee</option>
<option value="2" data-id="2" data-option="-1">Sally's Diner</option>
<option value="3" data-id="3" data-option="-1">Jim's Waffle House</option>
<option value="4" data-id="4" data-option="-1">No Mart</option>
<option value="5" data-id="5" data-option="-1">Ye Olde Ale Tavern</option>
</select>
<!-- child -->
<select class="combo-b" data-nextcombo=".combo-c" disabled>
<option></option>
<option value="1" data-id="1" data-option="1">15th's Avenue Coffee House</option>
<option value="2" data-id="2" data-option="4">14th Street location</option>
<option value="3" data-id="3" data-option="4">13th Avenue</option>
<option value="4" data-id="4" data-option="3">Scarlet Temple Location</option>
<option value="5" data-id="5" data-option="2">New Jack City</option>
<option value="6" data-id="6" data-option="5">Bob street</option>
<option value="7" data-id="7" data-option="1">Billy Avenue</option>
</select>
<!-- child/last -->
<select class="combo-c" disabled>
<option></option>
<option value="4" data-id="4" data-option="2">new display</option>
<option value="3" data-id="3" data-option="3">new display</option>
<option value="5" data-id="5" data-option="2">new display</option>
<option value="6" data-id="6" data-option="2">new display</option>
<option value="7" data-id="7" data-option="4">display #1</option>
<option value="8" data-id="8" data-option="5">new display</option>
<option value="9" data-id="9" data-option="5">new display</option>
<option value="10" data-id="10" data-option="5">new display</option>
<option value="11" data-id="11" data-option="5">new display</option>
<option value="12" data-id="12" data-option="5">new display</option>
<option value="13" data-id="13" data-option="6">new display</option>
<option value="14" data-id="14" data-option="6">new display</option>
<option value="15" data-id="15" data-option="6">new display</option>
<option value="16" data-id="16" data-option="1">Front's Counter</option>
<option value="17" data-id="17" data-option="1">back counter</option>
<option value="18" data-id="18" data-option="4">display #2</option>
</select>