I have a multi select tag. I would like to extract the selected values into an array, however I seem to only be able to extract the first value.
Please find a simplified version of what I'm trying to achieve below.
I've tried a couple of different options using:
this.value
node().value
but this only seems to extract the first selected value.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<!-- Build the select boxes -->
<p>Single select tag</p>
<select class="form-control" id = "select_single" >
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
<p id = "select_single_p"> </p>
<br>
<br>
<p>Multiple select tag</p>
<select multiple class="form-control" id = "select_multiple" >
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
</body>
<script>
// This works for a single select
d3.select("#select_single")
.on("change",function(d){
console.log("this is the select single value " + this.value)
})
// But for multiple selects I can only extract the first value
d3.select("#select_multiple")
.on("change",function(d){this.value.len;
console.log("this is the select multiple value " + this.value )
console.log(d3.select('#select_multiple').node().value)
})
</script>
</html>
You could take a few approaches, for starters you could use straight javascript within the change function:
d3.select("#select_multiple")
.on("change",function(d){
var values = Array.from(this.options) // create an array from the htmlCollection
.filter(function(option) { return option.selected }) // filter for selected values
.map(function(option) { return option.value; }); // return a new array with the selected values
console.log(values);
})
Another option is to use d3 to select the selected options, and for each of those, grab the value:
d3.select("#select_multiple")
.on("change",function(d){
var values = [];
selected = d3.select(this) // select the select
.selectAll("option:checked") // select the selected values
.each(function() { values.push(this.value) }); // for each of those, get its value
console.log(values)
})
Related
when i click button clone is worked but it is showing value only one dropdown list
i want to get value clone multiple dropdown list and show the alertbox
there is my code
$(document).ready(function() {
$('#btnid').click(function() {
$('#idcuntry').clone().attr('id', 'id_' + $(this).index()).insertAfter('#idcuntry');
var a = $('#idcuntry').val();
alert(a);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="idcuntry">
<option value="10">Selection </option>
<option value="20">Pa </option>
<option value="30">India </option>
</select><br/>
<input type="button" value="clone" id="btnid">
The first problem is that you are getting the value of #idcuntry, and there's only one with this ID (which is good, IDs should be unique, so you made the right choice of changing the ID of your clones).
To target multiple elements, you can add a class to them, for example class="countryselect".
Then, .val() will only return the value of the first element. But you can use .map() to get them all in an Array:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#btnid').click(function() {
$('#idcuntry').clone().attr('id', 'id_' + $(this).index()).insertAfter('#idcuntry');
var a = $('.countryselect').map(function() {
return $(this).val();
}).get();
alert(a);
});
});
</script>
<select id="idcuntry" class="countryselect">
<option value="10">Selection </option>
<option value="20">Pa </option>
<option value="30">India </option>
</select><br/>
<input type="button" value="clone" id="btnid">
I'm having trouble with dynamically selecting an option in another mulitiple dropdown using Bootstrap-select.
I want to append the item selected in "box one" to the ones already selected in "box two".
I have been able to selected multiple ones by manually adding them:
$('select#one').on('change', function() {
$('#two').selectpicker('val', ['TestA','TestB','','TestC']);
$('#two').selectpicker('refresh');
});
and grab the ones already selected:
$('select#one').on('change', function() {
var existingValues = $("#two").val() || [];
alert(existingValues);
});
the issue is that I can't seem to add all this together. This doesn't work, but it shows what I'm looking for:
$('select#one').on('change', function() {
var selectedOption = $(this).find(":selected").text();
var existingValues = $("#two").val() || [];
var newValues = selectedOption+','+existingValues;
var newValues = '\''+newValues.replace(/,/g, '\',\'')+'\''; //didnt help
alert(newValues);
$('#two').selectpicker('val', [newValues]);
$('#two').selectpicker('refresh');
});
Fiddle that work, but replaces values instead of adding it to the selected ones: https://jsfiddle.net/3tx8mzqn/
This works.
$("#one").on("change",function(event, clickedIndex, newValue, oldValue){
var select2values = $("#two").val();
var value = $(this).val();
if(select2values.indexOf(value)==-1)
{
select2values.push(value);
$("#two").val(select2values);
}
$("#two").selectpicker('refresh');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<select class="selectpicker" data-style="btn-danger" data-width="150px" title="box one" id="one" name="one" required>
<option value="TestA">TestA</option>
<option value="TestB">TestB</option>
<option value="TestC">TestC</option>
<option value="TestD">TestD</option>
<option value="TestE">TestE</option>
<option value="TestF">TestF</option>
</select>
<select class="selectpicker" data-style="btn-primary" data-width="fit" multiple title="box two" id="two" name="two" required>
<option value="TestA">TestA</option>
<option value="TestB">TestB</option>
<option value="TestC">TestC</option>
<option value="TestD">TestD</option>
<option value="TestE">TestE</option>
<option value="TestF">TestF</option>
</select>
I'm having trouble with getting the input of an < select > tag.
I figured out this jQuery snippet but something is wrong... If you run the snippet you can see that it is always just outputting the value of the first < select > element and not correctly outputting the option of the other < select > elements...
// Try the second element.
$("#ONE").on('change', function(eve) {
console.log($(this).children("option:selected").prop("value"));
var valueTWO = $("option:selected").prop("value");
});
$("#TWO").on('change', function(eve) {
console.log($(this).children("option:selected").prop("value"));
var valueONE = $("option:selected").prop("value");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<select name="" id="ONE">
<option title="A">A</option>
<option title="B">B</option>
</select>
<!-- End td 1 -->
</td>
<td>
<select class="" id='TWO' name="">
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
</select>
<!-- End td 2 -->
</td>
<td>
Your $("option:selected") selector is not being limited to only the changed dropdown - it's saying "Select all selected options on the entire page", and because there are multiple, it returns the first.
Try doing this instead:
$(this).children("option:selected").prop("value")
By doing $(this).children, you've narrowed down your selector to look only at options within the changed dropdown.
That being said, you can do a .val() on a dropdown/select to get the value, instead of having to traverse through selected options:
$('#mySelect').change(function() {
console.log( $(this).val() );
}
I am using the jQuery multiselect api to select multiple values in my application,but what i want that,when i click on a button beside that multiselect box all the selected values should be fetched.But i am not able to do that ,Here i am posting my code.
<link rel="stylesheet" type="text/css" href="http://labs.abeautifulsite.net/archived/jquery-multiSelect/jquery.multiSelect.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://labs.abeautifulsite.net/archived/jquery-multiSelect/jquery.multiSelect.js">
</script>
<h1>Form Submission Test</h1>
<p>Testing to ensure the correct values are actually passed when the form is submitted.</p>
<select name="region" id="regionHome">
<option value="MDC">MDC</option>
<option value="LAC">LAC</option>
<option value="BRO/WPB">BRO/WPB</option>
<option value="NOE">NOE</option>
<option value="OTHER">OTHER</option>
</select>
<input type="button" value="Search" onclick="searchByDate()" class="searchButton">
<script>
$("#regionHome").multiSelect();
function searchByDate() {
alert("There are " + $('input[name="regionHome[]"]:checked').length + " boxes selected");
var foo = [];
$('input[name="regionHome[]"]:checked').each(function (i, selected) {
$( 'div.regionHome' ).replaceWith( "<p>Test</p>" );
foo[i] = $(selected).val();
alert(foo[i]);
});
}
</script>
Selection along with count is here i am trying to show the count of each selected values in the label with each select i.e when ever i will select a value the count will be updated in the label fiddle is here
working fiddle
Thanks for posting the link to the place where the plugin is located. After checking it, the error is a simple typographical mistake.
Use this:
// notice the capital S in multiSelect
$("#regionHome").multiSelect();
Instead of:
// all lower case = BAD
$("#regionHome").multiselect();
You can see it working with your code on this JSFiddle: http://jsfiddle.net/gbtceq2m/
Now that the multiSelect works, you need to realize that the initial select "doesn't exist anymore" (not in the same way). It has been replaced by a set of checkboxes that mimic a multiselect. So you need to update the selector to work with those checkboxes instead of with the select options:
$('input[name="regionHome[]"]:checked').each(function (i, selected) {
foo[i] = $(selected).val();
alert(foo[i]);
});
You can see it working here: http://jsfiddle.net/gbtceq2m/1/
I'm guessing drop down should allow multiple selection?
If so, you'd have to add multiple attribute to your select drop down like below:
<select class="js-region-list-box" name="region" id="regionHome" multiple="true">
<option value="MDC">MDC</option>
<option value="LAC">LAC</option>
...
</select>
Also, jQuery provides .val() method which can be used to get value out of any form field.
In case of select box (drop down allowing multiple selection) .val() will return all the selected values separated by a comma
More Info about val() is here
Based on above info.
You could approach it like this
html
<select class="js-region-list-box" name="region" id="regionHome" multiple="true">
<option value="MDC">MDC</option>
<option value="LAC">LAC</option>
<option value="BRO/WPB">BRO/WPB</option>
<option value="NOE">NOE</option>
<option value="OTHER">OTHER</option>
</select>
<button class="js-regions">Get Regions</button>
js
var $regionListBox = $(".js-region-list-box");
$(".js-regions").on("click", function(e) {
e.preventDefault();
var selectedRegions = $regionListBox.val();
alert(selectedRegions);
});
Fiddle link: http://jsfiddle.net/Varinder/zdb06jp8/
I'm trying to figure out how to sync two multiple choice lists in javascript. Here's the code which works:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<script language="JavaScript">
<!--
function SelectEmail(name)
{
var listboxEmails = document.getElementById('emails');
for (var i=0;i<listboxEmails.length;i++)
{
listboxname = listboxEmails[i].innerHTML
if (listboxname == name)
{
listboxEmails.selectedIndex = i;
break;
}
}//end for
}//end function SelectEmail
// -->
</script>
<body>
<select id='names' name ='names' style = "width: 100" multiple="multiple" onClick="SelectEmail(this.value);">
<option value ="joe">joe</option>
<option value ="albert">albert</option>
<option value ="gary">gary</option>
<option value ="ace">ace</option>
</select>
<select id="emails" name ="emails" style = "width: 100;" multiple="multiple">
<option value ="joe#asds.com">joe</option>
<option value ="albert#asds.com">albert</option>
<option value ="gary#asds.com">gary</option>
<option value ="ace#asds.com">ace</option>
</SELECT>
</body>
</html>
However I want to make it show multiple choices. So for example if I choose albert and gary on the left list, I want the right list to select albert and gary as well. Please help me with this. Cheers.
Your function SelectEmail() can't work because it sets selectedIndex of your select, which selects one option and deselects the rest. Also, you are using the text content of the options in #emails in order to map them with the values of #names. That's not a good practice, because text nodes are supposed to show text and not to enable the identification of elements in your script.
Instead, you can access the selected attribute separately for each option you want to select. By adding an additional attribute to your #emails element's options, it could look like:
<select id="emails" name="emails" style="width: 100;" multiple="multiple">
<option value="joe#asds.com" data-name="joe">joe</option>
<option value="albert#asds.com" data-name="albert">albert</option>
<option value="gary#asds.com" data-name="gary">gary</option>
<option value="ace#asds.com" data-name="ace">ace</option>
</select>
You can now use the data-name attribute to map the options, for example in the following way:
function selectEmail() {
// deselect all
$('#emails option').removeAttr('selected');
var names = $('#names').val();
if (names == null) {
// none selected
return;
}
$.each(names, function (i, name) {
var selector = 'option[data-name="' + name + '"]';
$('#emails ' + selector).attr('selected', true);
});
}
Here's a working fiddle (you will notice that I also used the onchange event instead of onclick:
http://jsfiddle.net/H9hNH/2/