I'm using jQuery autocomplete multiple select, I'm trying to get the values into an array like: ["kiwi", "fraise", "avocat", "banane"], however it is only showing as: kiwi, fraise, avocat, banane,
I'm using chosenjs along with the chosen.order plugin
As I said I can easily get the selected items in order, I just can't get it to output as an array, any help would be most welcome.
The jquery code is:
$(document).ready(function() {
// Chosenify every multiple select DOM elements with class 'chosen'
$('select.chosen').chosen();
// Get a reference to the DOM element
var MY_SELECT = $('select[multiple].chosen').get(0);
$('#get-order').click(function() {
var selection = ChosenOrder.getSelectionOrder(MY_SELECT);
$('#order-list').empty();
$('#order-list').html("<div>" + selection + "</div>");
});
});
And the HTML is:
<h1>The Chosenified multiple <select></h1>
<p>
<select name="fruits" class="chosen" multiple style="width: 500px;">
<option value="banane">Banane</option>
<option value="pomme">Pomme</option>
<option value="poire">Poire</option>
<option value="ananas" selected>Ananas</option>
<option value="kiwi" selected>Kiwi</option>
<option value="goyave">Goyave</option>
<option value="abricot">Abricot</option>
<option value="fraise" selected>Fraise</option>
<option value="framboise">Framboise</option>
<option value="avocat" selected>Avocat</option>
</select>
</p>
<h2>Retrieving the order</h2>
<p>
<button type="button" id="get-order">Retrieve selection in order</button>
<br/>
</p>
<P>
<div id="order-list"></div>
Related
I would like to pass the text portion (not the value) of a form Select-Option to a hidden text-input field within the same form when the user makes a selection.
I have explored some java and PHP 'examples' I found in my research, but none of them seem to work for me.
I have posted a raw example of the form to see if anyone can lead me to water. Any help wouold be appreciated.
HMTL
<html>
<head>
</head>
<body>
<form action="fruitBasket.php" method="post" enctype="multipart/form-data">
<select id="fruitSelector" name="fruitSelector">
<option value="0" selected="selected" disabled="disabled">Select Fruit</option>
<option value="1">Grapes</option>
<option value="2">Strawberries</option>
<option value="3">Peaches</option>
<option value="4">Blueberries</option>
</select>
<br>
<br>
<input type="text" class="hiddenField" name="hiddenField" placeholder="Selected fruit appears
here.">
</form>
</body>
</html>
It's not as easy as getting the selected option's value, which can be retrieved simply as selectElement.value, yet it's not difficult at all.
selectElement.options will give you an array of ALL the options inside the select element.
You will find the selected option's index to be selectElement.selectedIndex.
With that said, you can access to the selected option like this: selectElement.options[selectElement.selectedIndex].
Finally, you can get the text property like this: selectElement.options[selectElement.selectedIndex].text
Here's the code:
// THIS CONSTANT REPRESENTS THE <select> ELEMENT
const theSelect = document.getElementById('fruitSelector')
// THIS LINE BINDS THE input EVENT TO THE ABOVE select ELEMENT
// IT WILL BE EXECUTED EVERYTIME THE USER SELECTS AN OPTION
theSelect.addEventListener('input', function() {
// THIS IS HOW YOU GET THE SELECTED OPTION'S TEXT
let selectedOptText = theSelect.options[theSelect.selectedIndex].text
// FINALLY, THIS COPIES THE ABOVE TEXT TO THE INPUT ELEMENT:
document.querySelector('.hiddenField').value = selectedOptText;
})
<form action="fruitBasket.php" method="post" enctype="multipart/form-data">
<select id="fruitSelector" name="fruitSelector">
<option value="0" selected="selected" disabled="disabled">Select Fruit</option>
<option value="1">Grapes</option>
<option value="2">Strawberries</option>
<option value="3">Peaches</option>
<option value="4">Blueberries</option>
</select>
<br>
<br>
<input type="text" class="hiddenField" name="hiddenField" placeholder="Selected fruit appears
here.">
</form>
well if you want to pass the text portion you should add the names as the values too like
---
code
---
<option value="Grapes">Grapes</option>
<option value="Strawberries">Strawberries</option>
---
code
---
I have a form with cloned elements. The method of the form is POST. When I dump the result of the POST only the final 'select' box value is shown because they are all the same. How can I change the name tag to the cloned elements?
JSFiddle: https://jsfiddle.net/hLefegxz/
HTML
<div id="employees-div">
<label for="employees">Employee(s)</label>
<div class="select-wrapper" id="select-employees">
<select id="employees" name="employees" >
<option value="" selected disabled>- Select Employee -</option>
<option value="1"> Jason Bourne </option>
<option value="2"> James Bond </option>
<option value="3"> Ethan Hunt </option>
</select>
</div>
JS for the Clone
$(function() {
$("#addMore").click(function(e) {
var newSelect = $("#select-employees").clone();
newSelect.val("123");
$("#employees-div").append(newSelect);
});
});
At the moment all fo the elements have the same name tag of employees. It obviously needs to be different to go into the $_POST array. How can I go about making them different? I was thinking maybe of incrementing and keeping a count? It Currently is like so:
Don't worry about changing the name, you can and should use an array for the name, but you should worry about the id, since ids must be unique and you are cloning elements without changing the id of the new element.
By adding the [] to the input name it will be sent to the server as an array, for example, if you're using PHP you can get them from $_GET['employees'] which will be an array you can loop thru.
$(function() {
$("#addMore").click(function(e) {
var newSelect = $('select[name="employees[]"]:first').clone();
$("#select-employees").append("<br>");
$("#select-employees").append(newSelect);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="employees-div">
<label for="employees">Employee(s)</label>
<div class="select-wrapper" id="select-employees">
<select name="employees[]" >
<option value="" selected>- Select Employee -</option>
<option value="1"> Jason Bourne </option>
<option value="2"> James Bond </option>
<option value="3"> Ethan Hunt </option>
</select>
</div>
<button id=addMore>+ Employee</button>
Instead of using a name and increasing an integer on each "new employee", you could simply name your select to employees[]. That will send every employee in an array format to your server, allowing you to use an easy loop.
Your code as another problem though. ID should be unique, so every time you clone your select, you should change the ID.
I'm working in Protractor and javasript. My page has 3 dropdowns of same class "imageeditor". I want to select the 2nd dropdown and click the option say "Package" by passing the text as parameter.I want the different xpath and css to perform the select option.
<div class="imageeditor">
<select class="form-control m-b-sm">
<option>Select Image Style</option>
<option value="image-panel">Panel</option>
<option value="image-package-panel">Package</option>
<option value="image-open-panel">Open</option>
</select>
</div>
<div class="imageeditor">
<select class="form-control m-b-sm">
<option>Select Image Style</option>
<option value="image-panel">Panel</option>
<option value="image-package-panel">Package</option>
<option value="image-open-panel">Open</option>
</select>
</div>
<div class="imageeditor">
<select class="form-control m-b-sm">
<option>Select Image Style</option>
<option value="image-panel">Panel</option>
<option value="image-package-panel">Package</option>
<option value="image-open-panel">Open</option>
</select>
</div>
You can get the desired select element by index:
var desiredImageEditor = $$(".imageeditor select").get(1);
Now, in order to select an option, you have multiple ways to do so. One is to select the inner option by the class name and click it:
var desiredOption = desiredImageEditor.$("option.image-package-panel");
desiredImageEditor.click(); // open up dropdown
desiredOption.click();
Or, it should also be possible to just send keys to the select element:
desiredImageEditor.sendKeys("Package");
There is also this convenient abstraction over select and option.
I'm looking to have separate sections of my form become visible dependant on the selection from a drop down menu.
Currently i'm having two issues, its only hiding the first area i want hidden and also i'm struggling with the syntax to get the multiple options working using if statements.
Am i looking at this the right way or is there an easier way of doing this.
In the code below i've only got 2 if statements as i've been struggling to get that correct so haven't done it for all 8 options i need to.
function showfield(name){
if (name=='Supplier meetings') {
document.getElementById('div1').style.display="block";
} else {
document.getElementById('div1').style.display="none";
if (name=='Product meetings') {
document.getElementById('div2').style.display="block";
} else {
document.getElementById('div2').style.display="none";
}
}
}
function hidefield() {
document.getElementById('div1').style.display='none';
document.getElementById('div2').style.display='none';
document.getElementById('div3').style.display='none';
document.getElementById('div4').style.display='none';
document.getElementById('div5').style.display='none';
document.getElementById('div6').style.display='none';
document.getElementById('div7').style.display='none';
document.getElementById('div8').style.display='none';
}
in my html i have:
<body onload="hidefield()">
<select name="acti" value="" onchange="showfield(this.options[this.selectedIndex].value)">
<option value="1">Worked hours</option>
<option value="2">Overtime</option>
<option value="3">Sickness</option>
<option value="4">Unpaid leave</option>
<option value="5">Compassionate leave</option>
<option value="6">Holiday inc bank holidays</option>
<option value="7">Team meetings</option>
<option value="8">One to ones</option>
<option value="9">One to one prep</option>
<option value="10">Huddles</option>
<option value="Supplier meetings">Supplier meetings</option>
<option value="Product meetings">Product meetings</option>
<option value="Training/coaching">Training/coaching</option>
<option value="Handling other peoples cases">Handling other peoples cases</option>
<option value="15">Project work</option>
<option value="16">Surgery time for GK</option>
<option value="17">Letter checks and feedback</option>
<option value="18">MI/Reporting/RCA</option>
</select>
Then divs that contain the parts i need displayed off each option.
Hope that makes sense.
Thanks
Instead of writing condition for each option value, you can use the value directly in selecting the div that is to be shown:
function showfield(name){
hidefield();
document.getElementById( 'div-' + name).style.display="block";
}
For this to work, your id's should match up with corresponding option values.
e.g. <option value="1">1</option>
corresponding div:
<div id="div-1"></div>
You can add a data-div attribute to every option which will be ID of respective div which will be shown and other divs will be hidden.
You need a class on every div so they can be hidden using that class name except the div which will be shown based on selection.
HTML
<select name="acti" value="" onchange="showfield(this.options[this.selectedIndex].value)">
<option value="1" data-div="one">Worked hours</option>
<option value="2" data-div="two">Overtime</option>
</select>
<div id="one">First Div</div>
<div id="two">Second Div</div>
Javascript
function showfield(val)
{
var divID = $("select[name=acti]").find("option[value='" + val + "']").attr("data-div");
$(".divClass").hide();//You can also use hidefield() here to hide other divs.
$("#" + divID).show();
}
Suppose I have following code:
<div class="topPagination">
<select id="itemsPage" onClick="changeItems(this.value);">
<option value="0">12 Items per Page</option>
<option value="100">View All</option>
</select>
</div>
<div id="mainContent">
</div>
<div class="bottomPagination">
<select id="itemsPage" onClick="changeItems(this.value);">
<option value="0">12 Items per Page</option>
<option value="100">View All</option>
</select>
</div>
<script>
function changeItems(itemsPage) {
want to get the id of the current <select> box.
}
</script>
how to get the id of the current box. like if select top select box or if i select bottom box.
Please help me to find a solution. I know with same ids is not the porper coding standard. But i have a situation like this.
This is not a valid HTLM code, all ids should be unique
But anyway you can use this code to get second checkbox
document.querySelectorAll('checkbox')[1];
if you need to browse through specific checkboxes, set them all some special class and use
document.querySelectorAll('.special_checkbox')[1];
If you "want to get the id of the current box", it will always be "itemsPage".
Having 2 objects in the DOM with the same ID is not valid HTML.
However, if you can change the DOM but can't change the IDs for some reason, you could do something like this:
<select id="itemsPage" onClick="changeItems(this);">
and then make your function:
function changeItems(select) {
// "select" is your element
// "select.value" is your value (that used to be passed in as "itemsPage"
}
Ultimately you should try and change one of the IDs, or use classes instead.
Try utilizing HTMLElement.dataset to substitute duplicate ids ; data-id="itemsPage-1" for first id=itemsPage ; data-id="itemsPage-2" for secondid=itemsPage ; pass selected element dataset.id at onClick event onClick="changeItems(this.value, this.dataset.id);"
function changeItems(itemsPage, id) {
console.log(itemsPage, id)
}
<div class="topPagination">
<select data-id="itemsPage-1" onClick="changeItems(this.value, this.dataset.id);">
<option value="0">12 Items per Page</option>
<option value="100">View All</option>
</select>
</div>
<div id="mainContent">
</div>
<div class="bottomPagination">
<select data-id="itemsPage-2" onClick="changeItems(this.value, this.dataset.id);">
<option value="0">12 Items per Page</option>
<option value="100">View All</option>
</select>
</div>
I think I know what it is you're trying to but this is a shot in the dark.
If you can change from using id to class this will work just fine.
window.onload=function(){
var PageItems=document.getElementsByClassName('itemsPage');
for(var i=0; i<PageItems.length; i++){
//Set Event Listeners for each element using itemsPage class name
PageItems[i].addEventListener('change',changeItems,false);
}
}
function changeItems(){
// New selected index
var Selected=this.selectedIndex;
var changeItems=document.getElementsByClassName('itemsPage');
for(var i=0; i<changeItems.length; i++){
//Change all select options to the new selected index.
changeItems[i].selectedIndex=Selected;
}
}
<div class="topPagination">
<select class="itemsPage">
<option value="0">12 Items per Page</option>
<option value="100">View All</option>
</select>
</div>
<div id="mainContent">
</div>
<div class="bottomPagination">
<select class="itemsPage">
<option value="07">12 Items per Page</option>
<option value="100">View All</option>
</select>
</div>
If you have any questions please leave a comment below and I will get back to you as soon as possible.
I hope this helps. Happy coding!