How to select dynamically in Bootstrap-select with multiple values - javascript

How can I select dynamically in Bootstrap-select with multiple values, if my values are 1,3,4, using jQuery?
Here is my select:
<select id="myselect" name="myselect[]" multiple>
<option value=""></option>
<option value="1">red</option>
<option value="2">orange</option>
<option value="3">green</option>
<option value="4">blue</option>
</select>

Use Bootstrap-Select's val method:
$('#myselect').selectpicker('val', [1,3,4]);
http://jsfiddle.net/a4bxnwws/
See Bootstrap-Select's documentation.

If you use selectpicker class then
<select class="selectpicker" id="myselect" name="myselect[]" multiple>
<option value=""></option>
<option value="1">red</option>
<option value="2">orange</option>
<option value="3">green</option>
<option value="4">blue</option>
</select>
And Your jquery code will be like below:
var select_items = ["1","3","4"];
$('#myselect').selectpicker('val', select_items);

You can set the value for the select element using two methods.
For the first one, you can use the method that the bootstrap-select plugin provided: selectpicker(just like the above answer);
The second one is using jquery's method - trigger. Such as:
$('#myselect').val([1,3,4]).trigger('change');

This should work:
$('#MySelectionBox').val(123).change();

<form action="yourpage.php" method="post">
<select id="myselect" name="myselect[]" multiple>
<option value=""></option>
<option value="1">red</option>
<option value="2">orange</option>
<option value="3">green</option>
<option value="4">blue</option>
</select>
<input type="submit" name="Submit" value="Submit">
</from>
PHP code starts to catch multiple selected values:
<?php
if(isset($_POST['Submit']))
{
$MyValues = $_POST['myselect'];
foreach($MyValues As $value)
{
echo $value."</br>";
}
}
?>

// Check this code in detail
<form action="yourpage.php" method="post">
<select id="myselect" name="myselect[]" multiple>
<option value=""></option>
<option value="1">red</option>
<option value="2">orange</option>
<option value="3">green</option>
<option value="4">blue</option>
</select>
<input type="submit" name="Submit" value="Submit">
</from>
PHP code starts to catch multiple selected values:
<?php
if(isset($_POST['Submit']))
{
$MyValues = $_POST['myselect'];
foreach($MyValues As $key => $value)
{
$SID = mysqli_real_escape_string($dbCon,$value);
echo $SID ."</br>";
}
}
?>

Related

On change of dropdown how will I redirect to another URL

<form action="myservlet.do" method="POST">
<select name="myselect" id="myselect" onchange="this.form.submit()">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</form>
When I select Two, I want to redirect it another form
What would be the perfect solution using javascript?
You can define js like this to achieve that.
function changeEvent() {
var selectedVal = document.getElementById("myselect").value;
if (selectedVal === "2") {
window.location.href = 'http://testurl.com';
return false;
}
}
<form id="form1" runat="server">
<select name="myselect" id="myselect" onchange="changeEvent()">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</form>

Set selected option to multiple list using jQuery

I have a list from DB which is displayed in select multiple tags:
<select multiple="multiple" id="list" name="color">
<option value="1">Red</option>
<option value="2">Green</option>
<option value="3">Blue</option>
<option value="4">Magenta</option>
<option value="5">Black</option>
<option value="6">Cyan</option>
<option value="7">Yellow</option>
</select>
Given an array of values from DB, need to select only those items that are found in the DB array, for example [2,4,7]. How do I push, with jQuery, attr('selected') to these option tags?
<select multiple="multiple" id="list" name="color">
<option value="1">Red</option>
<option value="2" selected="selected">Green</option>
<option value="3">Blue</option>
<option value="4" selected="selected">Magenta</option>
<option value="5">Black</option>
<option value="6">Cyan</option>
<option value="7" selected="selected">Yellow</option>
</select>
Like above.
You've just to use the .val() method to achieve that :
$('#list').val([2,4,7]);
$('#list').val([2,4,7]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="multiple" id="list" name="color">
<option value="1">Red</option>
<option value="2">Green</option>
<option value="3">Blue</option>
<option value="4">Magenta</option>
<option value="5">Black</option>
<option value="6">Cyan</option>
<option value="7">Yellow</option>
</select>
For the sake of completeness, I thought I would add a plain javascript solution.
Here's what I came up with, using an array, a loop, document.querySelector and setAttribute:
var preSelected = [2,4,7];
for (var i = 0; i < preSelected.length; i++) {
var option = document.querySelector('#list option[value="' + preSelected[i] + '"]');
option.setAttribute('selected','selected');
}
<select multiple="multiple" id="list" name="color">
<option value="1">Red</option>
<option value="2">Green</option>
<option value="3">Blue</option>
<option value="4">Magenta</option>
<option value="5">Black</option>
<option value="6">Cyan</option>
<option value="7">Yellow</option>
</select>

Select web form elements with specific attribute

I have the following HTML form:
<form name="catForm">
<select name="group">
<option value="1">Group 1</option>
<option value="2">Group 2</option>
</select>
<select name="catid[1]" catid="1">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="catid[3]" catid="3">
<option value="1">1</option>
<option value="2">2</option>
</select>
</form>
How to select using (JavaScript or jQuery) all SELECT's from my form (only those having catid attribute) and show its catid attribute values and selected option values?
You can use filter() method passing the attribute selector as parameter:
var cat = [];
$('select').filter('[name^="catid"]').each(function() {
cat.push($(this).attr('name'));
});
alert(cat);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form name="catForm">
<select name="group">
<option value="1">Group 1</option>
<option value="2">Group 2</option>
</select>
<select name="catid[1]" catid="1">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="catid[3]" catid="3">
<option value="1">1</option>
<option value="2">2</option>
</select>
</form>
You can use has attribute selector:
$('select[catid]');
And then iterate over returned elements using .each() and log the values and attributes.
Working Snippet:
$('select[catid]').each(function(){
console.log($(this).attr("catid"));
console.log($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form name="catForm">
<select name="group">
<option value="1">Group 1</option>
<option value="2">Group 2</option>
</select>
<select name="catid[1]" catid="1">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="catid[3]" catid="3">
<option value="1">1</option>
<option value="2">2</option>
</select>
</form>
$('select[name^=catid]').each(function() {
console.log($(this).attr("catid")); // get attribute using this
console.log($(this).val()); // get selected value using this
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="catForm">
<select name="group">
<option value="1">Group 1</option>
<option value="2">Group 2</option>
</select>
<select name="catid[1]" catid="1">
<option value="1" selected>1</option>
<option value="2">2</option>
</select>
<select name="catid[3]" catid="3">
<option value="1">1</option>
<option value="2" selected>2</option>
</select>
</form>
I hope it should be help to you
var categories= $('[catid]').serialize();
console.log(categories);
This will be generate name and value mapping in querystring format you can use this string in ajax method as data as a post method.
See this: https://jsfiddle.net/gredztox/
You can use select[name^="catid"] method for selecting an multiple array elements with its name.
<script>
$(document).on('change','select',function(){
var catArr = [];
$('select[name^="catid"]').each(function() {
catArr.push($(this).val());
});
document.getElementById('result').innerHTML = catArr;
});
</script>
Your Final Output

How to dynamically display a placeholder and deselect the other options, in a select form menu using Javascript/Jquery

I have the following drop-down menu:
<form action="...">
<select name="fruits" id="my-fruits">
<option value="" disabled selected>Select a fruit</option>
<option value="apple">apple</option>
<option value="orange">orange</option>
<option value="peach">peach</option>
</select>
<select name="animals" id="my-animals">
<option value="" disabled selected>Select an animal</option>
<option value="dog">dog</option>
<option value="cat">cat</option>
<option value="iguana">iguana</option>
></select>
</form>
What I need is when the user changes the selected option in one filed (i.e. on change event), the placeholder to be displayed on the other and vice-versa.
For example, lets say that the user had already selected orange in #my-fruits. Now, when the user changes the selection from dog to cat in #my-animals:
the placeholder "Select a fruit" to be displayed automatically on #my-fruits field, and
then, the <option value="orange"> have its "selected" attribute removed
Ira, try this:
$('#my-fruits')
.add('#my-animals')
.on('change', function () {
$(this).siblings().prop('selectedIndex', 0);
});
Also, remove unnecessary arrow in this line:
></select>
Good luck ;)
$('select').change(function() {
$(this).siblings('select').prop('selectedIndex', 0);
console.log($('option:selected', this).val())
console.log($(this).siblings('select').val())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form action="...">
<select name="fruits" id="my-fruits">
<option value="" disabled selected>Select a fruit</option>
<option value="apple">apple</option>
<option value="orange">orange</option>
<option value="peach">peach</option>
</select>
<select name="animals" id="my-animals">
<option value="" disabled selected>Select an animal</option>
<option value="dog">dog</option>
<option value="cat">cat</option>
<option value="iguana">iguana</option>
</select>
</form>
Just set the selected option of sibling select to first index
Try
$('#animals').change(function() {
$('#fruits').val("");
});

Handling multiple select and same name of checkbox

I am having problems when I want to pass multiple value to backend from form.
Questions are:
How can I get all values in the multiple select in the backend.
How can I get the different value with same name in checkbox in the backend.
From the code in Jsfiddle, I'd like to show the select result in result.
By the way, I am using Django.
Full code is here: Jsfiddle
<form method="POST">
<select id="select-tag" name="tagging" multiple="multiple">
<option value="">Tagging Sample... </option>
<optgroup label="Type A">
<option value="Aa">Aa</option>
<option value="Ab">Ab</option>
<option value="Ac">Ac</option>
</optgroup>
<optgroup label="TypeB">
<option value="Ba">Ba</option>
<option value="Bb">Bb</option>
<option value="Bc">Bc</option>
</optgroup>
</select>
<input type="checkbox" value='00001' name="sample"></input>
<input type="checkbox" value='00002' name="sample"></input>
<input type="submit" value="Submit" class="submitted_btn" name="btn_action"></input>
</form>
You can use array type name in the html to get the value in backend.
<form method="POST">
<select id="select-tag" name="tagging[]" multiple="multiple">
<option value="">Tagging Sample... </option>
<optgroup label="Type A">
<option value="Aa">Aa</option>
<option value="Ab">Ab</option>
<option value="Ac">Ac</option>
</optgroup>
<optgroup label="TypeB">
<option value="Ba">Ba</option>
<option value="Bb">Bb</option>
<option value="Bc">Bc</option>
</optgroup>
</select>
<input type="checkbox" value='00001' name="sample[]"></input>
<input type="checkbox" value='00002' name="sample[]"></input>
<input type="submit" value="Submit" class="submitted_btn" name="btn_action"></input>
</form>

Categories

Resources