Multiselect options with each option selecting multiple times using jquery - javascript

Select numbers (you can select each number any number of times):
<select name="number_selection" method="post" id="number_selection" >
<option value="0">0</option>
<option value="1">1 </option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="button" value="Select" id="select_button"/>
<div id="feedback"> </div>
what I've tried in jquery is this....
$('#select_button').click(function(){
var gs= $('#number_selection').val();
$('#feedback').html(gs);
});
Now, What i am trying to do is, if i select a number from the options, it should display in the 'div' and if i select another number or the same number again, it should display beside the first number, but i am only able to select only a single number, not multiple numbers. I want the do this using jquery
If you don't understand my problem, i can explain you further. Please help.
And also if I want to deselect each element from the list appended?
I've tried this... but isn't working.
$('#select_button').click(function(){
var gs= $('#number_selection').val();
$('#feedback').append(gs + ' ' + '<input type="button" value="Remove" id="gs_remove" />' + '<br>');
});
$('#gs_remove').click(function(){
(this).hide();
});
but with this i am not able to remove each selected option.

Replace
$('#fcb_pt_gs').html(gs);
by
$('#fcb_pt_gs').append(gs);

$('#select_button').click(function() {
var _val = $('#fcb_pt_gs').text();
var gs= $('#number_selection').val();
if( _val == "" ) {
var _collection = [];
}
else {
// Add in collection
var _collection = [_val];
}
_collection.push( gs );
$('#fcb_pt_gs').html( _collection.join(',') );
});

Related

Clicking on the first option js

Tell me please, there is a code in which when you click option select, a div element is added with an option value.
But there is a problem, which is that you cannot immediately click on the first option, you must first click on the second, and only after the first. How to fix this problem?
Thank you in advance.
var p = document.getElementById("inputi");
var length = 1;
function add_input_from_select(select) {
var new_input = document.createElement("input");
new_input.name = "my_input";
new_input.value = select.value;
var div = document.createElement('div');
div.innerHTML = '<br>div элемент №' + length + '<br>';
div.appendChild(new_input);
p.appendChild(div);
length++;
}
function add_input_old() {
add_input_from_select(document.getElementById("selector"));
}
<select id="selector" onchange="add_input_from_select(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br>
<form>
<div id="inputi"><input name="my_input"></div>
</form>
In html dropdown you can not able to select a value which already selected, so must need to add one more option in your dropdown which say "Please Select" and after that you can able to select any option. That's the right solution
See working example:-
var p = document.getElementById("inputi");
var length = 1;
function add_input_from_select(select) {
var new_input = document.createElement("input");
new_input.name = "my_input";
new_input.value = select.value;
if(!new_input.value) return false;
var div = document.createElement('div');
div.innerHTML = '<br>div элемент №' + length + '<br>';
div.appendChild(new_input);
p.appendChild(div);
length++;
}
function add_input_old() {
add_input_from_select(document.getElementById("selector"));
}
<select id="selector" onchange="add_input_from_select(this)">
<option value="">Please Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br>
<form>
<div id="inputi"><input name="my_input"></div>
</form>
This happens because you done it with onchange event so the first option is already selected thats why first time it doesn't add div so for overcome that just add one more option to html like
<select id="selector" onchange="add_input_from_select(this)">
<option value="">select Option</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
and put condition in javascript like,
if(document.getElementById("selector").value != ""){
//add your div here
}
this condition must apply because when you select first option it did not be added like select options.

Selected value is not added to the existing text inside text area when a user type inside of it

I have a drop list where the nurse choose from, a diagnostic, and then this diagnostic is added into a textarea where the nurse will add more details near it. Then, they can add more diagnostics into the same textarea and add more info near this diagnostic.
Whenever the nurse selecting diagnostics, they are adding normally, but the moment she types in the textarea near the diagnostic added, and went to add another one, nothing is added.
Here is the jQuery script for the process:
$("#medication_id").on('change', function(){
$("#medication_pill").text($("#medication_pill").text() + " + " + $("#medication_id option:selected").text());
});
Change your code to use $("#medication_pill").val(). This will work for you:
$("#medication_id").on('change', function(){
$("#medication_pill").val($("#medication_pill").val() + " + " + $("#medication_id option:selected").text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='medication_id'>
<option>Medication 1</option>
<option>Medication 2</option>
<option>Medication 3</option>
</select>
<textarea id="medication_pill"></textarea>
The .val() method is primarily used to get the values of form elements such as input, select and textarea. When called on an empty collection, it returns undefined.
It is hard to debug without html code. So please always remember that when you ask a question you should add enough code so that the problem was reproducable.
This code has a few things that should be changed
First of all avoid using $(selector) more than it is necessary (it is memory consuming). If you want to perform a couple of operations like in your case on an element $("#medication_pill") just save it to a variable.
Secondly on html form elements it is better to use val() function instead of text(). Here is why
Lastly in an change event you do not have to do make jQuery call to the select element ($("#medication_id option:selected")) since this event is bounded to this element. Instead you can just use $(this).
Here is an working example with desired functionality.
$("#medication_id").on('change', function() {
var textarea = $("#medication_pill");
textarea.val($("#medication_pill").val() + " + " + $(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="medication_id">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<textarea id="medication_pill"></textarea>
And here is an example with clearing select after change so that you can select tha same option couple of times in a row.
var select = $("#medication_id");
var textarea = $("#medication_pill");
select.on('change', function() {
textarea.val($("#medication_pill").val() + " + " + select.val());
select.val("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="medication_id">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<textarea id="medication_pill"></textarea>

Add array values to hidden form field

I am trying to add comma separated values to a hidden form field for later processing using the change of a dropdown menu as my trigger.
$("#artistselect").change(function() {
var allids = [];
allids.push($(this).children(":selected").attr("id"));
$("input[name=artistslist]").attr("value", $(allids).append(allids + ", "));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="artistselect">
<option value="1">1</option>
<option value="1">1</option>
<option value="1">1</option>
</select>
<input type="hidden" name="artistslist" value="" />
</form>
Best I can manage is to get the value to change to the selected dropdown, but it wont add them together with the commas.
Move var allids=[]; out of the event because you're destroying it every time it fires.
var allids=[];
$("#artistselect").change(function() {
allids.push($(this).children(":selected").attr("id"));
$("input[name=artistslist]").val(allids.join(', '));
});
On the last line you can use Array.prototype.join to get a comma separated string from the array.
Not sure why you are using .attr("id") when your html shows your options with no id attribute. Looks like you want value not id.
You have two problems.
First, you're emptying allids every time the user selects from the menu. So when you push onto it, you lose the old values, and you just get the most recent value.
Second, $(allids).append(allids + ", ") doesn't do what you think it does. .append() is for adding something to a DOM element, not concatenating strings.
To get the value of a <select>, just use $(this).val(), you don't need to search for :selected. Your <option> elements don't have IDs, so .attr('id') won't return anything.
var allids = [];
$("#artistselect").change(function() {
allids.push($(this).val());
$("input[name=artistslist]").val(allids.join(", "));
});
$("#show").click(function() {
console.log($("input[name=artistslist]").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="artistselect">
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="hidden" name="artistslist" value="" />
<button type="button" id="show">Show hidden value</button>
</form>

jquery get selected values of multiple select boxes

i have this form ..
<form method="post" action=''>
<select class="first">
<option value="0">choose ...</option>
<option value="1">Hello</option>
<option value="3">It's</option>
</select>
<select class="second">
<option value="0">choose ...</option>
<option value="2">World</option>
<option value="4">me</option>
</select>
<input type="text" class="dest" value="" />
</form>
and would like to dynamically gather selected informations with jQuery, because I need to decide on the selected values ...
When you select specific combination of OPTION values (lets say Hello + World) it should add some value to INPUT.dest and lock it (disable from editing) ...
But I can't make it work ... What I have, is that on each change of each select (separately only) i can map the actual value
$(document).ready(function () {
$(".first").change(function () {
var option = $(this).find("option:selected").val();
$(".dest").val(option);
});
$(".second").change(function () {
var option2 = $(this).find("option:selected").val();
$(".dest").val(option2);
});
});
Here is the live demo in fiddle
Do you know what am I missing? I know it will be just a little thing .. thank you
I would generalize it and use one event listener, and then gather the combination and do whatever:
$("select").change(function () {
var first = $(".first").find("option:selected").val();
var second = $(".second").find("option:selected").val();
if(first == 1 && second == 2)
$(".dest").val("Hello world").prop("disabled",true);
else
$(".dest").val("Something else").prop("disabled",false);
});
http://jsfiddle.net/cxx428af/3/

Merge select box selects values

I have 3 select boxes and one input.
I need to merge the selected values together and add it to the hidden input box.
For example:
<select name="select-choice-1" id="select-choice-1">
<option value="1-">1</option>
</select>
<select name="select-choice-1" id="select-choice-2">
<option value="5-">5</option>
</select>
<select name="select-choice-1" id="select-choice-3">
<option value="2011">2011</option>
</select>
Finally I want to get:
Is this case the value would be:
1-5-2011
How could I get this functionality togehter please?
JSFiddle Demo:
one way to do it is:
HTML:
<select name="select-choice-1" id="select-choice-1">
<option value="1-">1</option>
<option value="2-">2</option>
<option value="3-">3</option>
</select>
<select name="select-choice-1" id="select-choice-2">
<option value="5-">5</option>
<option value="6-">6</option>
<option value="7-">7</option>
</select>
<select name="select-choice-1" id="select-choice-3">
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
</select>
<input type='hidden' id='myhidden' value='' />
JavaScript:
<script type='text/javascript'>
$(document).ready(function() {
$('select').each(function() {
$(this).change(function() {
var myele = '';
$.each($('select option:selected'), function() {
myele += $(this).val();
});
$('#myhidden').val(myele);
console.log($('#myhidden').val());
});
});
});
</script>
Modified w/ onchange.
If you want the code to be flexible enough to work with an arbitrary number of <select> elements, you can write something like:
$("#yourInputBoxId").val($("[id^=select-choice-]").map(function() {
return $(this).val();
}).get().join(""));
Here, map() will project into an array the selected values of all the <select> elements whose id attributes begin with select-choice-. The array items are then concatenated into a string, without a separator (since the values already contain one).
$( "#id_of_hidden_input" ).val(
$( "#select-choice-1" ).val() +
$( "#select-choice-2" ).val() +
$( "#select-choice-3" ).val()
);
you get always use php by POST or get
change the names
<select name="select-choice-1" id="select-choice-1">
<option value="1-">1</option>
</select>
<select name="select-choice-2" id="select-choice-2">
<option value="5-">5</option>
</select>
<select name="select-choice-3" id="select-choice-3">
<option value="2011">2011</option>
</select>
$choice1 = $_POST['select-choice-1'];
$choice2 = $_POST['select-choice-2'];
$choice3 = $_POST['select-choice-3'];
echo $choice ."-".$choice2 ."-".$choice3;
You'll want to use the selectedIndex and options properties of the select element. Here is a quick example:
var elm1 = document.getElementById("select-choice-1"),
elm2 = document.getElementById("select-choice-2"),
elm3 = document.getElementById("select-choice-3"),
sel1 = elm1.options[elm1.selectedIndex].value,
sel2 = elm2.options[elm2.selectedIndex].value,
sel3 = elm3.options[elm3.selectedIndex].value;
alert( sel1 + sel2 + sel3);
var $selects = $('#select_box_1,#select_box_2,#select_box_3');
var seperator = '-';
$selects.change(function() {
var val = [];
$selects.each(function() {
val.push($(this).val());
});
$('#hidden_input').val(val.join(seperator));
}).trigger('change');
This allows for any number of selectbox values to be concatinated with a seperator of your choice.
The .trigger('change); causes the bound .change(...) event to fire and concatinate the values on page load (just in case the form ha been submitted and the selectboxes prefilled)

Categories