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>
Related
I have a drop down list of options which lets my users choose one of a few options. But I want to also include a button that when pressed will select a specific option out of the dropdown list.
This is working but the issue is that the dropdown list isnt showing the updated selection, but if you click on the dropdown list you can see that the selection the button chose is highlighted and is indeed selected.
function onclick() {
document.form.server_select.value = 'Quebec';
}
<select name="server_select" id="server_select">
<option value="random" selected>Auto Select</option>
<option value="Quebec">Quebec</option>
<option value="NewYork">NewYork</option>
<option value="Seattle">Seattle</option>
<option value="France">France</option>
</select>
<button onclick="onclick()">Button</button>
When you load the page the first option is displayed in the drop down to the user as seen
and
After pressing the button the dropdown still shows the first option in the list but when clicking onto the dropdown you can see a different option is selected.
I expected the dropdown to also show the new selection.
The code works as expected:
function change() {
document.getElementById('server_select').value = 'Quebec';
}
<form>
<select name="server_select" id="server_select">
<option value="random" selected>Auto Select</option>
<option value="Quebec">Quebec</option>
<option value="NewYork">NewYork</option>
<option value="Seattle">Seattle</option>
<option value="France">France</option>
</select>
</form>
<button onclick="change()">Button</button>
But looking at the screenshots, it looks like they are doing a custom dropdown, basically you are clicking on a transparent select, and they are updating their pretty dropdown manually, something like this:
function change() {
document.getElementById('server_select').value = 'Quebec';
}
function change2() {
element = document.getElementById('server_select')
element.value = 'Quebec';
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('change', true, true, window);
element.dispatchEvent(event);
}
function open() {
document.getElementById('server_select').value = 'Quebec';
}
document.getElementById('server_select').addEventListener('change', function(event) {
document.getElementById('value').innerHTML = event.target.value
})
#dropdown {
position: relative;
}
#server_select {
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<form>
<div id="dropdown">
<span id="value">Auto Select</span>
<select name="server_select" id="server_select">
<option value="random" selected>Auto Select</option>
<option value="Quebec">Quebec</option>
<option value="NewYork">NewYork</option>
<option value="Seattle">Seattle</option>
<option value="France">France</option>
</select>
</div>
</form>
<button onclick="change()">Button</button>
<button onclick="change2()">Button Fixed</button>
You'll have to look at the actual HTML structure of your document to see what you need to update, but use the Button Fixed example to see (basically) what you need to do.
You should avoid using reserved words such as onclick as function name
for list of reserved words please look into https://www.w3schools.com/js/js_reserved.asp
function change() {
document.getElementById("server_select").value = "Quebec";
}
<select name="server_select" id="server_select">
<option value="random" selected>Auto Select</option>
<option value="Quebec">Quebec</option>
<option value="NewYork">NewYork</option>
<option value="Seattle">Seattle</option>
<option value="France">France</option>
</select>
<button onClick="change()">Button</button>
<script>
</script>
I want to create a dropdown box with a few items. Once the user selects the item and clicks the '+' button, the item is added below to a 'basket' section. They should be able to add multiple items over and over.
document.getElementById("button").onclick = function() {
var a = document.getElementById("selection");
var item = a.options[a.selectedIndex].text;
document.getElementById("basket").innerHTML = item;
var counter = 1;
while (counter <= 1) {
var list = document.write(item);
counter++;
}
}
<h1>Select your items!</h1>
<form id="myForm">
<p>Item:
<select id="selection">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
<button id="button">+</button></p>
</form>
<br><br><br>
<h1>Basket</h1>
<p id="basket"></p>
When the button is pressed, all current content disappears and the item selected appears on its own.
The button in the form has no type="button". Therefore it is used as submit button and that's why you get the blank page.
You don't need a loop.
Example
var button = document.getElementById("button");
var select = document.getElementById("select");
var basket = document.getElementById("basket");
// Add text
function addToBasket() {
var li = document.createElement("li");
li.innerHTML = select.options[select.selectedIndex].text;
basket.appendChild(li);
}
button.addEventListener("click", addToBasket);
<h1>Select your items!</h1>
<form id="myForm">
<p>Item:
<select id="select">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
<button id="button" type="button">+</button></p>
</form>
<h1>Basket</h1>
<ul id="basket"></ul>
You are not concatenating them. document.getElementById("basket").innerHTML = item; removes everything in the basket and add only the selected one.
Use this to concatenate the new item with what already exists in the basket document.getElementById("basket").innerHTML += item;. You can style it to make the basket look nice.
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>
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.
I have two (or in some places more) dropdowns (select) with several options. There is also a button for clearing all selected values in dropdowns. There is one aspect of this clearing button that does not working properly for my needs.
The button is displayed only if dropdowns has selected option with value, after is selected options with empty value, button is hidden. After i choose some option in both dropdowns (button displayed) and then change value in one from this dropdowns to option without value (button is hidden). Problem is, that button is hidden after one from dropdowns has empty value.
I need that button to be hidden only if all dropdowns have a selected option with an empty value. This jsfiddle illustrates what I mean.
I use select2.js for the dropdowns.
HTML:
<input type="button" class="opt-clear" value="Clear all dropdowns">
<div class="option">
<select>
<option value="">Please select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
<div class="option">
<select>
<option value="">Please select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
Javascript:
$('select').select2();
$('.option select').change(function() {
var id=$(this).val();
if (id=="") {
$(".opt-clear").hide();
} else {
$(".opt-clear").show();
}
}).trigger('change');
$(".opt-clear").click(function() { $(".option select").select2("val", ""); });
You have to check the val from all lists. If at least one them has a value then dont hide the button. You have to use each() and a var as a flag.
Try:
$('.option select').change(function () {
var flag = 1;
$(".option select").each(function (index) {
var id = $(this).val();
if (id != "") {
flag = 0;
}
});
if (flag) {
$(".opt-clear").hide();
} else {
$(".opt-clear").show();
}
}).trigger('change');
DEMO
Use this code your problem will be solved:
HTML Code :
<input type="button" id="btnChangeddValue" onclick="ddChangeValue();" style="display: none;"
class="opt-clear" value="Clear all dropdowns">
<div class="option">
<select id="dd1" onchange="ddChange(this.value);">
<option value="">Please select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
<div class="option">
<select id="dd2" onchange="ddChange(this.value);">
<option value="">Please select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
Js Script :
function ddChange(ddValue) {
if (ddValue != "" && ddValue != null) {
// $('#btnChangeddValue').css({ 'display': 'block' });
document.getElementById('btnChangeddValue').style.display = 'block';
}
else {
document.getElementById('btnChangeddValue').style.display = 'none';
}
}
function ddChangeValue() {
document.getElementById('dd1').value = "";
document.getElementById('dd2').value = "";
document.getElementById('btnChangeddValue').style.display = 'none';
}
Reguards,
Hardik Patel
hi I would try to get all the select with value. if their count is greater than 0 than button should be displayed. you can achieve that with jquery filter funstion
if ( $('.option select').filter(function(0 { return $(this).val != ''; }).length > 0){
//show button
}
else{
//hide button
}
Updated your fiddle.
$('.option select').change(function() {
checkvalue();
if(flag){
$('input').show();
}else{
$('input').hide();
}
}).trigger('change');
function checkvalue(){
$('.option select').each(function(){
if ($(this).val()!="") {
flag = true;
}else{
flag = false;
}
});
}
Your DOM has multiple select tags. So your code did not work.