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>
Related
I've been trying to fetch user input from a simple drop-down list to fill it into a <p> tag but can't seem to get it done.
The following is my javascript:
<script>
function changeText() {
var textDDL = document.getElementById("DDL1");
var text = textDDL.options[textDDL.selectedIndex].value;
var test = document.getElementById("test");
test.innerHTML = text;
}
</script>
The following is my HTML code:
<p class="first">
<label for="first">From</label>
<input list="countriesDL" name="country" class="form-control" type="text" id="DDL1">
<datalist id="countriesDL">
<option value="Afghanistan" class="form-control"></option>
<option value="Albania"></option>
<option value="Algeria"></option>
<option value="Aland Islands"></option>
<option value="American Samoa"></option>
<option value="Anguilla"></option>
<option value="Andorra"></option>
<option value="Angola"></option>
<option value="Antilles - Netherlands"></option>
<option value="Antigua and Barbuda"></option>
<option value="Antarctica"></option>
<option value="Argentina"></option>
<option value="Armenia"></option>
<option value="Australia"></option>
<option value="Taiwan"></option>
</datalist>
</p>
<button id="info2Btn" type="button" class="btn btn-warning leggo" style="color:black;" onClick="changeText()">Let's Go</button>
The codes would be triggered by a button press. I've tried reloading the page upon button press to see if it applies the user input, I've tried calling the function upon clicking the button. Can't seem to see what's wrong with it.
[UPDATED] Is this what you are trying?
function changeText() {
var textDDL = document.getElementById("DDL1");
var text = textDDL.value;
var test = document.getElementById("text");
test.innerHTML = text;
}
<p class="first">
<label for="first">From</label>
<input list="countriesDL" name="country" class="form-control" type="text" id="DDL1">
<datalist id="countriesDL">
<option value="Afghanistan" class="form-control"></option>
<option value="Albania"></option>
<option value="Algeria"></option>
<option value="Aland Islands"></option>
<option value="American Samoa"></option>
<option value="Anguilla"></option>
<option value="Andorra"></option>
<option value="Angola"></option>
<option value="Antilles - Netherlands"></option>
<option value="Antigua and Barbuda"></option>
<option value="Antarctica"></option>
<option value="Argentina"></option>
<option value="Armenia"></option>
<option value="Australia"></option>
<option value="Taiwan"></option>
</datalist>
</p>
<button id="info2Btn" type="button" class="btn btn-warning leggo" style="color:black;" onClick="changeText()">Let's Go</button>
<p id="text"></p>
Try
function changeText() {
document.getElementById("test").innerHTML = document.getElementById("DDL1").value;
}
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'm trying to set an input value from a dropdown list but it doesn't seem to work for me. this is my code:
<form>
<select name="color" id="color">
<option selected value="0">white</option>
<option value="1">orange</option>
<option value="1">black</option>
<option value="2">yellow</option>
<option value="2">green</option>
<option value="4">gray</option>
<option value="4">red</option>
<option value="8">pink</option>
<option value="8">blue</option>
</select>
<input type="text" id="output">
</form>
$('#color').bind('change', function() {
$('#output').html($(this).find(':selected').html() + '<br>');
console.log($(this).find(':selected').html());
});
It works when I replace <input type="text" id="output"> with <div id="output"></div>. Any solutions?
The #output element is an input, so you need to use val(), not html(), to set its value.
Also note that bind() is deprecated. You should use change() or on('change') instead. Try this:
$('#color').on('change', function() {
$('#output').val($(this).find(':selected').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select name="color" id="color">
<option selected value="0">white</option>
<option value="1">orange</option>
<option value="1">black</option>
<option value="2">yellow</option>
<option value="2">green</option>
<option value="4">gray</option>
<option value="4">red</option>
<option value="8">pink</option>
<option value="8">blue</option>
</select>
<input type="text" id="output">
</form>
Try this example,
$('#color').bind('change', function() {
$('#output').val($('#color option:selected').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select name="color" id="color">
<option selected value="0">white</option>
<option value="1">orange</option>
<option value="1">black</option>
<option value="2">yellow</option>
<option value="2">green</option>
<option value="4">gray</option>
<option value="4">red</option>
<option value="8">pink</option>
<option value="8">blue</option>
</select>
<input type="text" id="output">
</form>
I have made changes in your selection of option text.
I hope this will help.
Try this:
$(document).ready(function() {
$('#color').on('change', function() {
//alert( this.value );
$('#output').val(this.value);
});
});
<script type="text/javascript">
$('#color').bind('change', function(){
$('#output').val($(this).find(':selected').html() + '<br>');
console.log($(this).find(':selected').html());
});
Input tags always has value so you have to change code to below.
<script type="text/javascript">
$(document).on('change','#color', function(){
$('#output').val($(this).find(':selected').html() + '<br>');
});
</script>
with input element it should be val() not html()
$(document).on('change','#color', function() {
$('#output').val($(this).find(':selected').html());
});
<span id="s_home_country">
<select name="Home Country" id="home_country">
<option value="Select one" selected="selected">Select one</option>
<option value="h1">Home1</option>
<option value="h2">Home2</option>
<option value="h3">Home3</option>
<option value="h4">Home4</option>
</select>
</span>
and I have another data that i want to incorporate, when Home1 is selected, I want this to show 21-dec into another textbox automatically. and so on..
var Home_country = [
"21-Dec",
"01-Jan",
"01-Jan",
"01-Jan",
];
You could use an object and an event listener.
var home_country = {
"h1":"21-Dec",
"h2":"01-Jan",
"h3":"01-Jan",
"h4":"01-Jan",
};
var selectbox = document.getElementById('home_country');
var textbox = document.getElementById('home_country_date');
selectbox.addEventListener('change', function(e){
textbox.value = home_country[this.value]
})
<span id="s_home_country">
<select name="Home Country" id="home_country">
<option value="Select one" selected="selected">Select one</option>
<option value="h1">Home1</option>
<option value="h2">Home2</option>
<option value="h3">Home3</option>
<option value="h4">Home4</option>
</select>
</span>
<input type="text" id="home_country_date">
Please find below snippet just add another attribute data-attr1 and on change of select list find selected option and get its attribute with name data-attr1 and pass attribute's value to textbox
$("#home_country").on("change",function(){
$(".txtvalue").val($(this).find("option:selected").attr("data-attr1"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="s_home_country">
<select name="Home Country" id="home_country">
<option value="Select one" selected="selected">Select one</option>
<option data-attr1="21-Dec" value="h1">Home1</option>
<option data-attr1="01-Dec" value="h2">Home2</option>
<option data-attr1="02-Dec" value="h3">Home3</option>
<option data-attr1="03-Dec" value="h4">Home4</option>
</select>
</span>
<input type="text" class="txtvalue" />
Add an event listener to your select input which outputs the relevant value from your array when an option is selected:
var el = document.getElementById('home_country');
var textbox = document.getElementById('your_textbox_el');
el.addEventListener('change', function(e){
if (e.target.value == 'h1') {
textbox.value = Home_country[0];
} else if (e.target.value == 'some other condition') {
// do something else
}
}
Unless I'm misunderstanding you, you can just put the values of the Home_country array inside the value properties of the options like so:
<span id="s_home_country">
<select name="Home Country" id="home_country">
<option value="Select one" selected="selected">Select one</option>
<option value="21-Dec">Home1</option>
<option value="01-Jan">Home2</option>
<option value="01-Jan">Home3</option>
<option value="01-Jan">Home4</option>
</select>
</span>
Now, when you do get the value of your select element, it will be the value in the array that you gave.
I've created functionality to move items from the left -> right, and vice versa. On top of that, I am added the option values of each item into a hidden input box, so I can later submit it to the server for processing. It seems that when I try to add more than one item at a time, only the first one is being added to the hidden input box though.
In the end, my hidden input field should look like: 3233,2332,3234,1212,112
Since I'll accept the parameters in the Ruby on Rails server side to parse and do whatever to (unless there's a better option).
Here's my current code:
$("#btnLeft").click(function(){
var selectedItem = $("#hosts_assigned option:selected");
$("#hosts_available").append(selectedItem);
$("#hosts").remove(selectedItem.val());
});
$("#btnRight").click(function(){
var selectedItem = $("#hosts_available option:selected");
$("#hosts_assigned").append(selectedItem);
var current_hosts = $("#hosts").val();
$("#hosts").val(current_hosts + "," + selectedItem.val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="hosts_available"size="30" multiple="multiple">
<option value="1222">1.1.2.2</option>
<option value="1232">1.1.2.2</option>
<option value="1242">1.1.2.2</option>
<option value="1252">1.1.2.2</option>
</select>
<select id="hosts_assigned" size="30" multiple="multiple">
<option value="1111">1.1.2.1</option>
</select>
</form>
<button type="button" id="btnRight">>></i></button>
<br/>
<button type="button" id="btnLeft"><<</i></button>
<br/><br/>
<input type="text" id="hosts" />
You are getting more than one.
You need to loop. you also need to loop after removing
function getHosts() {
var current_hosts=[];
$("#hosts_assigned option").each(function() {
current_hosts.push($(this).val());
});
return current_hosts.length>0?current_hosts.join(","):"";
}
$("#btnLeft").click(function() {
$("#hosts_assigned option:selected").each(function() {
$("#hosts_available").append(this);
})
$("#hosts").val(getHosts());
});
$("#btnRight").click(function() {
$("#hosts_available option:selected").each(function() {
$("#hosts_assigned").append(this);
});
$("#hosts").val(getHosts());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="hosts_available" size="30" multiple="multiple">
<option value="1222">1.1.2.2</option>
<option value="1232">1.1.2.2</option>
<option value="1242">1.1.2.2</option>
<option value="1252">1.1.2.2</option>
</select>
<select id="hosts_assigned" size="30" multiple="multiple">
<option value="1111">1.1.2.1</option>
</select>
</form>
<button type="button" id="btnRight">>></i>
</button>
<br/>
<button type="button" id="btnLeft"><<</i>
</button>
<br/>
<br/>
<input type="text" id="hosts" value="" />