how to set dropdown to select after onclick event in javascript

how to set dropdown to select after onclick event in javascript - javascript

I have a dropdown with few options in it and a onclick event on a button , after making the selection from the dropdown and clicking on the button how do i set the dropdown to its default that is select by JavaScript.
<select id="userType">
<option value="Select" disabled selected
id="myDefault">Select</option>
<option value="1">Games</option>
<option value="2">Movies</option>
</select>
<button type="button" name="button"onclick="addOption()">Send</button>
function addOption(){
if (userType.value === "Select") {
alert("Please select correct option");
}
else{
console.log(userType.options[userType.selectedIndex].value);
}
document.getElementById('userType').value = "Select";
}

Pretty straight forward. Just select the input by id and set its value to whatever the default should be.
function addOption(){
// Do stuff...and then:
document.getElementById('userType').value = "Select";
}
<select id="userType">
<option value="Select" disabled selected
id="myDefault">Select</option>
<option value="1">Games</option>
<option value="2">Movies</option>
</select>
<button type="button" name="button"onclick="addOption()">Send</button>

<html>
<body>
<form id="myForm">
<select id="a">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<br>
<input type="button" onclick="myFunction()" value="Reset">
</form>
</body>
</html>
<script>
function myFunction() {
document.getElementById('a').selectedIndex = 0;
}
</script>
try this

Here is your working code:
$("button").click(function() {
$('select').prop('selectedIndex', 0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="userType">
<option value="Select" disabled selected
id="myDefault">Select</option>
<option value="1">Games</option>
<option value="2">Movies</option>
</select>
<button type="button" name="button">Send</button>

You can attach change event to <select> element, declare a variable, at event handler set variable to true to verify that change event has occurred. At click of <button> set select .selectedIndex property to 0 if Boolean value is true, set Boolean to false.
<script>
var changed, select;
function addOption() {
if (changed) {
select.selectedIndex = 0;
changed = false;
}
}
onload = function() {
select = document.getElementById("userType");
select.onchange = function() {
changed = true;
}
}
</script>
<select id="userType">
<option value="Select" disabled selected
id="myDefault">Select</option>
<option value="1">Games</option>
<option value="2">Movies</option>
</select>
<button type="button" name="button" onclick="addOption()">Send</button>

Related

How to reset tail.select list to default?

How can I reset select values from tail.select (Link to https://github.com/pytesNET/tail.select) using JS or JQuery, I tried changing the value from select, but it doesn't help.
<select class="form-control searchSelect">
<option value="" selected disabled> </option>
<option value="1">V1</option>
<option value="2">V2</option>
<option value="3">V3</option>
</select>
<button type="button" class="resetList">Reset List</button>
<script>
let tselect = tail.select('.searchSelect', {
search:true,
deselect:true,
hideSelected:true,
hideDisabled:true
});
$(document).on('click', '.resetList', function(){
$('.searchSelect ').val();
$(".searchSelect option:selected").removeAttr("selected");
$('.searchSelect').val(null).trigger('change');
});
</script>
I have tried till
$('.searchSelect ').val();
$(".searchSelect option:selected").removeAttr("selected");
$('.searchSelect').val(null).trigger('change');
I read the documentation, but I couldn't figure it out.

You can use the reload() method of the tail.select() object:
let tselect = tail.select('.searchSelect', {
search:true,
deselect:true,
hideSelected:true,
hideDisabled:true
});
document.querySelector("button").addEventListener("click", () => tselect.reload());
<script src="https://cdn.jsdelivr.net/npm/tail.select#latest"></script>
<select class="form-control searchSelect">
<option value="" selected disabled> </option>
<option value="1">V1</option>
<option value="2">V2</option>
<option value="3">V3</option>
</select>
<button type="button" class="resetList">Reset List</button>
If you don't want to clear the text that is in the filter input, then use can use the query() method without arguments:
let tselect = tail.select('.searchSelect', {
search:true,
deselect:true,
hideSelected:true,
hideDisabled:true
});
document.querySelector("button").addEventListener("click", () => tselect.query());
<script src="https://cdn.jsdelivr.net/npm/tail.select#latest"></script>
<select class="form-control searchSelect">
<option value="" selected disabled> </option>
<option value="1">V1</option>
<option value="2">V2</option>
<option value="3">V3</option>
</select>
<button type="button" class="resetList">Reset List</button>

How to change select's option based on a selected option's value?

I have select tag below:
<select name="selID" id="selID" data-mini="true"">
<option value="1" selected="selected">Tithes</option>
<option value="2">Offering</option>
<option value="3">Designated</option>
<option class="selOptAddMore" value="0">Add More...</option>
</select>
I want to change value when one of the options is selected except for "Add More..."
Sorry I'm a newbie. Thanks in advance.

You can try this:
The HTML:
<body>
Result: <p id="result"></p>
<select name="selID" id="selID" data-mini="true" onchange="test()">
<option value="1" selected="selected">Tithes</option>
<option value="2">Offering</option>
<option value="3">Designated</option>
<option class="selOptAddMore" value="0">Add More...</option>
</select>
<script src="test.js"></script>
</body>
test.js:
function test() {
let listVal = document.getElementById("selID").value;
if (listVal != "0") {
document.getElementById("result").innerHTML = listVal;
}
else {
listVal = 1; // this is value for "Tithes"
document.getElementById("selID").value = listVal;
document.getElementById("result").innerHTML = listVal;
}
}

Required attribute not working for select tag by onclick button

I am trying to alert a value when a user clicks the submit button. I gave the "required" attribute to both select tag but it is not working.
I want to alert a value when a user submits a button. Can anyone tell where i went wrong?
Code:-
function openWindow() {
var OR = document.getElementById("request").value;
var SZ = document.getElementById("sites").value;
var ORSZ = OR + SZ;
alert(ORSZ);
}
<select id="request" class="dropdownbox" required>
<option value="">Select</option>
<option value="ip">approve</option>
<option value="url">reject</option>
</select>
<select id="sites" class="dropdownbox" required>
<option value="">Select</option>
<option value="cp">Account</option>
<option value="sm">Demat</option>
</select>
<input type="button" onclick="openWindow()" value="Submit">

Here you go with a solution https://jsfiddle.net/1mydje82/1/
$('select').on('change', function(){
var required = false;
$('select').each(function(){
if($(this).val() === '')
required = true;
});
$('input[value="Submit"]').attr('disabled', required);
});
$('input[value="Submit"]').click(function(){
var OR = $("#request").val();
var SZ = $("#sites").val();
var ORSZ = OR + SZ;
alert(ORSZ);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="request" class="dropdownbox" required>
<option value="">Select</option>
<option value="ip">approve</option>
<option value="url">reject</option>
</select>
<select id="sites" class="dropdownbox">
<option value="">Select</option>
<option value="cp">Account</option>
<option value="sm">Demat</option>
</select>
<input type="button" value="Submit">
</form>
I've used jQuery. Initially your Submit button will be disabled.
Once you select both the drodown with values then only Submit button will be enabled.
Hope this will help you.

You can't rely on required attribute of <select>(because it's only work when form submits normally, and not supported in Opera anyhow).
You can make it happening like below:-
Example:-
function openWindow() {
var OR = document.getElementById("request").value;
var SZ = document.getElementById("sites").value;
if(OR =='' || SZ ==''){
alert('Please select values from both select-box'); return false;
}else{
var ORSZ = OR + SZ;
alert(ORSZ);
}
}
<form>
<select id="request" class="dropdownbox">
<option value="">Select</option>
<option value="ip">approve</option>
<option value="url">reject</option>
</select>
<select id="sites" class="dropdownbox">
<option value="">Select</option>
<option value="cp">Account</option>
<option value="sm">Demat</option>
</select>
<input type="button" onclick="openWindow()" value="Submit">
</form>

Show dropdown option in button

I have a drop-down list what i want to do is when i choose an option from this list it displays a button under it with that option, the user can choose more than one option so i want to display many buttons with a close sign so the user can remove that option, how can i do that using JavaScript? here is my code:
$('select').on('change', function() {
var unselected = $('select').filter(function() {
return this;
$('.btn').show();
});
});
.btn{
display:none;}
<div class="form-group">
<label>Pick your item</label>
<select class="form-control">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
<option>Item 4</option>
</select>
</div>
<button type="button" class="btn btn-default">Chosen value should be here</button>

Like this you haven't the close sign, but it would work almost the same way.
// everytime some option is selected in the select with "cars" id
$('#cars').on('change', function() {
// it will run through the selected options
$('option:selected').each(function() {
var op = $(this);
var text = op.text();
// checks if the button is already there
var already_there = false;
$('#btns button').each(function() {
var btn = $(this);
if(btn.text() == op.text()) {
already_there = true;
// leaves the verification
return false;
}
});
// if it isn't, appends to the div with id "btns"
if(!already_there) {
var btn = $('<button type="button" class="btn btn-default" onclick="removeBtn(this)"></button>');
btn.append(text);
$('#btns').append(btn);
}
});
});
// removes a button (obvious xD)
function removeBtn(btn) {
$(btn).remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head><title>Test</title></head>
<body>
<select multiple id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<div id="btns"></div>
</body>
</html>

Using Javascript to check form elements and enabling/disabling the search button

I need your help,
Using javascript, how could I add some sort of data form validation that would be two-fold:
1st Event, [OnKeyUp] attached to all of the input boxes
2nd Event, [OnChange] attached to all of the select boxes
Typical User Scenarios
If there is any data present in any of the input boxes and no selected option values then { enable the search button } else { keep the search button disabled }
If there are any selected option values who’s option value is not null and no data present in all of then { enable the search button } else { keep the search button disabled }
<!DOCTYPE html>
<html>
<head></head>
<body>
<form id="myform">
Cars
<select id="car">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br><br>
Fruits
<select id="fruits">
<option value=""></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="pear">pear</option>
<option value="strawberry">strawberry</option>
<option value="mango">mango</option>
<option value="orange">orange</option>
</select>
<br><br>
Vegetable
<input type="input" id="veggie">
<br><br>
Number
<input type="input" id="number">
<br><br>
<input type="button" value="search" id="search" disabled>
</form>
</body>
</html>

var car=$('#car'); var fruits=$('#fruits');
var veggie=$('#veggie'); var number = $('#number');
$('select').change(function(){
validate();
});
$('input').keyup(function(){
validate();
});
function validate(){
if(($(veggie).val()!='' || $(number).val()!='') &&
$(car).val()=='' && $(fruits).val()==''){
$('#search').prop('disabled',false);
}else if($(veggie).val()=='' && $(number).val()=='' &&
($(car).val()!='' || $(fruits).val()!='')){
$('#search').prop('disabled',false);
}else{
$('#search').prop('disabled',true);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<form id="myform">
Cars
<select id="car">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br><br>
Fruits
<select id="fruits">
<option value=""></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="pear">pear</option>
<option value="strawberry">strawberry</option>
<option value="mango">mango</option>
<option value="orange">orange</option>
</select>
<br><br>
Vegetable
<input type="input" id="veggie">
<br><br>
Number
<input type="input" id="number">
<br><br>
<input type="button" value="search" id="search" disabled>
</form>
</body>

I'm not 100% sure, but it looks like you want to enable the button if only one of the select elements has a value or one of the input elements has a value, but not if both (or neither) do.
If that's the case then this should work, and it allows you you add as many elements to it as you need by adding IDs to the arrays at the top.
https://jsfiddle.net/j7by6bsz/
var selectInputIds = ['fruits', 'car'];
var textInputIds = ['veggie', 'number'];
function setButtonState() {
var hasVal = function(arr) {
for(var i = 0; i < arr.length; i++) {
if(document.getElementById(arr[i]).value) {
return true;
}
}
return false;
};
var hasSelectValue = function () {
return hasVal(selectInputIds);
}
var hasTextValue = function () {
return hasVal(textInputIds);
}
var theButton = document.getElementById('search');
var s = hasSelectValue();
var t = hasTextValue();
theButton.disabled = ((s && t) || (!t && !s)); // you can do this bit smarter, but this is explicit
}
(function attachStuff (arr, evt) {
function listenIn(arr, evt) {
for(var i = 0; i < arr.length; i++) {
document.getElementById(arr[i]).addEventListener(evt, setButtonState);
}
}
listenIn(selectInputIds, 'change');
listenIn(textInputIds, 'keyup');
}())
Your requirements could use some clarification around what happens if both input types have values though.

Develop Reference

JavaScript is the programming language of the Web.

how to set dropdown to select after onclick event in javascript - javascript

Related

How to reset tail.select list to default?

How to change select's option based on a selected option's value?

Required attribute not working for select tag by onclick button

Show dropdown option in button

Using Javascript to check form elements and enabling/disabling the search button

Categories

Resources