My Select2 box is working oddly with multiple selection turned on.
When I submit my form it sends duplicate post data in a mirror-like fashion.
For example, I select
'United States','United Kingdom','Ireland'
It posts (Reported by firebug and shown in html result)
'United States','United Kingdom','Ireland','United Kingdom','United States'
My HTML for countries(slimmed down)...
<select multiple name="country" id="country" class="select2" data-placeholder="Select Country/Countries" style="width:220px;" required>
<option value=""></option> <option value="United States">United States</option> <option value="United Kingdom">United Kingdom</option> <option value="Afghanistan">Afghanistan</option> <option value="Albania">Albania</option><option value="Zimbabwe">Zimbabwe</option>
</select>
And my JS only calls
$('.select2').select2();
I have no idea why this might be happening. I'm using other JS libraries like Bootstrap,jQueryValidate,and Zebra DatePicker, but I don't think they would interfere.
You may have called $('.select2').select2(); function twice. I faced the same issue and the reason was that I had called the function twice for same dropdown.
Try this
$("#country").select2();
Related
I am select using select2-multiple function, and here is my code
<select data-placeholder="Choose Colors" class="chosen-select" multiple tabindex="4">
<option value=""></option>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Orange">Orange</option>
<option value="Orange">Orange</option>
</select>
I want the user can add Orange value multiple times if he wants. By default select2 multiple didnot accepts duplicate value. Can someone here please help
You can select both if you hold the shift key by clicking on the option.
Maybe you should do Orange-1 and Orange-2 as Value. So if you want to submit it in a form you have two different GET or POST parameter.
Check this example: https://www.w3schools.com/tags/att_select_multiple.asp
<select data-placeholder="Choose Colors" class="chosen-select" multiple tabindex="4">
<option value=""></option>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Orange-1">Orange</option>
<option value="Orange-2">Orange</option>
</select>
On my form, I'm trying to make the select box display the standard "select one" option so the user can click on it and pick among the 3 options I've made. I want this part of the form to be required while also not allowing the default option to go through. Any help in making the first option not work would be appreciated! Thank you!
<option selected="selected">Select one</option>
<option value="air">On the air</option>
<option value="web">On the web</option>
<option value="both">Both</option>
Just change
<select required>
<option value="" selected>Select one</option>
<option value="air">On the air</option>
<option value="web">On the web</option>
<option value="both">Both</option>
</select>
Users can never submit the default option.
You could have the Select one option be both selected and disabled, like this.
function validate(self) {
console.log(self.value);
}
<select onchange="validate(this)" required>
<option disabled selected>Select one</option>
<option value="air">On the air</option>
<option value="web">On the web</option>
<option value="both">Both</option>
</select>
The onchange event will trigger whenever a new value is chosen in the dropdown.
The selected tag makes sure its the default option.
The disabled tag makes sure it can't be chosen as an actual option.
The required tag prevents the form from submitting if the dropdown value is still its default.
The "select one" text should really not be an option, but instead a label
<label>Select One:</label>
<select>
<option value="air">On the air</option>
<option value="web">On the web</option>
<option value="both">Both</option>
</select>
Situation:
I have an option list like
<select class="database-column-name" name="caseid">
<option value="1">1</option>
<option value="2">1</option>
<option value="3">1</option>
</select>
and by default there is no option selected, but when you select an option you can't go back to selecting none again! This messes up the user experience of my page because I need the user to be able to selected no option at all.
Question:
Is there a hack to get around this?
Is as simple as this
<select class="database-column-name" name="caseid">
<option value=" ">--Select--</option>
<option value="1">1</option>
<option value="2">1</option>
<option value="3">1</option>
</select>
$("select.database-column-name option").prop("selected", false);
You could have a "clear selection" button or something fire this code.
The preceding answer is a really good choice. The only recommendation that I would add to it is to make the value for the first item a "0"(zero), which allows your post-processing code to look for a specific value to ensure "no selection". Granted, you can look for " ", but that's easy to confuse with "".
<select class="database-column-name" name="caseid">
<option value="0">--Select--</option>
<option value="1">1</option>
<option value="2">1</option>
<option value="3">1</option>
If you want to have an actual blank show, rather than a phrase like "--Select--" then simply replace the "--Select--" text with a space.
<html>
<body>
<select class="database-column-name" name="caseid">
<option value="0"> </option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
The "value" portion is not displayed and is present to simplify code-based analysis of the selected option. In this case, a value of "0" would mean that no option has been selected.
I have this type of multiple select dropdown menu I want to add to my form
<form>
...
<select id="example2" multiple="multiple">
<div id="otherChoices">
<optgroup label="Academic" class="blah">
<option value="Engineering" class="blah">Engineering</option>
<option value="Humanities">Humanities</option>
<option value="Life_Sciences">Life Sciences</option>
<option value="Social Sciences_Sciences">Social Sciences</option>
</optgroup>
<optgroup label="Clubs">
<option value="Event">Event </option>
<option value="Meeting">Meeting</option>
<option value="Performance">Performance</option>
</optgroup>
<optgroup label="Personal">
<option value="Discussion">Discussion</option>
<option value="Event">Event</option>
<option value="Food">Food</option>
<option value="Hangout">Hangout</option>
<option value="Trip">Trip</option>
</optgroup>
</div>
</select>
</form>
But I'm not sure what type of input form this is (it's a bootstrap created form but not of a valid input type), so I'm not sure exactly how to send the parameters via a post request. Currently, I'm using jquery to grab the selected values and and fill in a hidden form. Is there a better way about this?
You made a few mistakes in your HTML:
This is the corrected version:
<form action="test2.php" method="post">
<select name="example2[]" id="example2" multiple="multiple" >
<div id="otherChoices" name="hello">
<optgroup label="Academic" class="blah">
<option value="Engineering" class="blah">Engineering</option>
<option value="Humanities">Humanities</option>
<option value="Life_Sciences">Life Sciences</option>
<option value="Social Sciences_Sciences">Social Sciences</option>
</optgroup>
<optgroup label="Clubs">
<option value="Event">Event </option>
<option value="Meeting">Meeting</option>
<option value="Performance">Performance</option>
</optgroup>
<optgroup label="Personal">
<option value="Discussion">Discussion</option>
<option value="Event">Event</option>
<option value="Food">Food</option>
<option value="Hangout">Hangout</option>
<option value="Trip">Trip</option>
</optgroup>
</div>
</select>
<button type="submit">Submit</button>
</form>
EDIT:
This is what I corrected:
I added a name value to the select with square brackets to show its an array
I added a method type to the form: method="post"
Submit button
You can then access the individual items like this:
echo $_POST["example2"][0];
EDIT: Sorry I realised this is Node.js That one was for PHP. See this link for how to get post variable in node js:
How do you extract POST data in Node.js?
When you submit a form, it passes an array to the next page, specified in the form's action attribute. If one isn't set, it will submit to the current URL.
By default, forms will submit using GET unless set the method attribute to post.
So, change your <form> tag to the following:
<form method="post" action="test.php">
And give your select a name, like name="test_select".
And then your test.php can look like this:
<?php
print_r($_POST);
(no need for a ?> closing tag)
This will print the $_POST array and you'll see how multiple selects work.
I have a drop down list that when selected seems to revert to the default text, while the drop down works well and does what it is suppose to on the post back it as I said goes back to the default (sort by). I hope you awesome people could help me understand how I might be able to use Jquery to maintain the selected after a post back.
Here is the current code.
<select class="sorter" onchange="location=this.options[[this.selectedIndex]].value" style="float:right;margin-right:8px;">
<option value="">Sort by</option>
<option value="?orderby=0">Code</option>
<option value="?orderby=1">Title A-Z</option>
<option value="?orderby=2">Title Z-A</option>
<option value="?orderby=3">Manufacturer</option>
<option value="?orderby=4">Lowest price</option>
<option value="?orderby=5">Highest price</option>
<option value="?orderby=6">Lowest Quantity</option>
<option value="?orderby=7">Highest Quantity</option>
</select>