I have a multiselect dropdown inside a table
<td>
<select multiple="multiple" name="multiple" id="multiple" class="required">
</select>
</td>
The option values are populated with json data.
for(var i=0;i<jsonString.length;i++){
var name=jsonString[i].Name;
$('#multiple').append('<option value=' + name + '>' + name + '</option>');
}
When the user start selection i am trying to display each selected item inside a paragraph
<script>
function displayVals() {
var multipleValues = $("#multiple").val() || [];
$("p").html( " <b>Selected Properties:</b> " +
multipleValues.join(", "));
}
$("select").change(displayVals);
displayVals();
</script>
But in the paragraph i get just one word per selection, not the complete name. (Say If i select "some text" i get only "some"). Can somebody point out where is the error?
While populating with JSON data use
<option values= > instead of `<option value>
Working fine for me now.`
Related
I have a dropdown list which is initially empty:
<div>
<label>Boarding Point </label>
<select title="Select pickup city" id="boardingDropdown">
</select>
</div>
I want to update it from the json data obtained from an API.
I can print the data obtained from API in the console, but I cannot
add it to the dropdown using jquery.
here is my jquery code
$.getJSON(busApi, function(boardingPoints) {
$.each(boardingPoints, function(index, value){
let $boardingOption = $("<option>" + value + "</option>");
$("#boardingDropdown").append($boardingOption);
});
});
The dropdown just shows undefined without any other data.
I have tried other similar questions (like this and this) but they did not solve my problem.
Could somebody tell me what am I doing wrong?
Thanks.
Edit:
console.log(value) shows the output
Kathmadnu
Birgunj
Pokhariya
Langadi Chowk
Bhiswa
Birgunj
which is the expected output from the api.
I created a list with this data
let buses=["Kathmadnu",
"Birgunj",
"Pokhariya",
"Langadi Chowk",
"Bhiswa",
"Birgunj"
];
Now the list still show undefined initially, but if I click on it, it shows the dropdown list as expected.
Does it mean there is problem with the API? But I can see the data obtained from the API in the console?
Try this solution:
$.each(items, function (i, value) {
$('#boardingDropdown').append($('<option>', {
value: value_value,
text : text_value
}));
});
The output should be something like this:
<select title="Select pickup city" id="boardingDropdown">
<option value="value_value">text_value</option>
</select>
Instead of:
let $boardingOption = $("<option>" + value + "</option>");
you should use:
let boardingOption= "<option>" + value + "</option>";
And in your code:
$(#boardingDropdown").append($boardingOption);
you missed a quote mark, it should be: $("#boardingDropdown")
Finally, according to my corrections, it should become:
$("#boardingDropdown").append(boardingOption);
Found the problem:
I had given id to the <select> tag and was adding the options to this tag.
<select title="Select pickup city" id="boardingDropdown">
</select>
Instead, what I did was to create a <div> tag above the <select> tag, and append <select>, then <option> and then </select> from the jquery.
<div>
<label>Boarding Point </label>
<div id="boardingDropdown"></div>
</div>
Then in the jquery, I appended the <select> tag as well:
$.getJSON(busApi, function (boardingPoints) {
let opt = '<select>';
$.each(boardingPoints, function (index, value){
opt += '<option value="' + index + '">' + value + '</option>';
});
opt += '</select';
$("#boardingDropdown").append(opt);
});
Now it is working as expected. :)
Is there any HTML/JavaScript code that can allow the viewer of a webpage to add a option to a dropdown select list by typing it in a text box???
Very basic example. No CSS, fancy formatting, error checking, anything. The value of the new option will be identical to the displayed string.
function newOpt() {
var $inp = $('#newOptIpt');
var v = $inp.val();
$('#modSelect').append('<option value="' + v + '">' + v + '</option>');
$inp.val('')
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<select id="modSelect">
<option value="default-1">Default option</option>
</select>
<br><br>
<input id="newOptIpt"/>
<button onclick="newOpt();">Add Option</button>
How can I get 2 different variables from select box and hidden inputs in jquery, i.e:
<select name="startID[]" class="startID">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="hidden" name="startText[]" value="Text1">
<br />
<select name="startID[]" class="startID">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="hidden" name="startText[]" value="Text2">
<br />
<select name="startID[]" class="startID">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="hidden" name="startText[]" value="Text3">
so I have 3 select boxes with 3 hidden inputs, how can I get the value of each select boxed and the text that is attached to? i.e: if I select like this:
Select item is 1 and text is Text1
Select item is 3 and text is Text2
Select item is 2 and text is Text3
Thanks in advance
function getValues() {
$('select').each(function (idx, el) {
console.log("Select item is " + $(el).val() + " and text is " + $(el).next('input[type="hidden"]').val());
});
}
If you want to list the values on change:
$('select.startID,input[type="hidden"]').change(getValues);
Demo (modified a bit):
http://jsfiddle.net/6ev9evew/
NOTE
The updates below are not answers for the original question, but the question's author keeps posting extra questions in the comments! So the solution is above!
UPDATE:
As I can understand this is what you looking for:
function getValues() {
var me = this;
$('select').each(function (idx, el) {
console.log("Select item is " + $(el).val() + " and text is " + $(el).next('input[type="hidden"]').val());
if (el === me) return false;
});
}
So basically we stop the loop at the actual element. But it works only if you pass this function to an event handler.
DEMO 2: http://jsfiddle.net/6ev9evew/1/
UPDATE 2:
So, according to the third question, this is a version of the implementation. As I mentioned below in the comments section, there are multiple ways to implement it. This implementation uses that the array indexes are always in order.
function getValues() {
var result = [];
var me = this;
$('select').each(function (idx, el) {
var $el = $(el);
result[10*$el.val()+idx]=("Select item is " + $el.val() + " and text is " + $el.next('input[type="hidden"]').val()+'<br />');
if (me === el) return false;
});
$('#res').html(result.join(''));
}
$('select.startID,input[type="hidden"]').change(getValues);
DEMO 3:
http://jsfiddle.net/6ev9evew/2/
But you can also implement it with array.sort(fn) but than you do a second iteration on the result set.
Anyway if you have more than ten selects in your real code, don't forget to modify the multiplier at result[10*$el.val()+idx] !
If you want to know the value of the changed select (when the user selects a value on any of them) and also get the value of the input type hidden which is next to it, that's the way:
$('.startID').on('change', function () {
var sel = $(this).val();
var hid = $(this).next('input[type=hidden]').val();
console.log('Select item is ' + sel.toString() + ' and text is ' + hid.toString());
});
Demo
UPDATE
To achieve what you've asked in the comments, you can do it like this:
// Create two arrays to store the values.
var sel = [];
var hid = [];
$('.startID').on('change', function () {
// Put the selected values into the arrays.
sel.push($(this).val());
hid.push($(this).next('input[type=hidden]').val());
console.log(sel);
console.log(hid);
for (var i = 0; i < sel.length; i++) {
console.log('Select item is ' + sel[i].toString() + ' and text is ' + hid[i].toString());
}
});
Demo
UPDATE : I test my code on firefox and everything was alright but on chrome :|
I have two different selecting drop lists . one for Province and another for cities.
I want to let users first select their Province then i show them cities selection list which is only containing cities of selected Province . my idea was to achieve it this way :
HTML
<select id="Province">
<option value = "1">Province1</option>
<option value = "2">Province2</option>
</select>
<select id = "CityList">
<option value = "1">city1</option>
<option value = "1">city2</option>
<option value = "2">city3</option>
</select>
cities with value one are inside Province with value one
jquery
$("#Province").change(function(){
$("#CityList option").css({'display':'none'});
var id = "#CityList option[value = " + $("#Province option:selected").val() + "]" ;
$(id).css({'display':'block'});
})
But the problem is none of the options will get visible again :|
And i checked if i'm selecting correct option by changing font color of it
I don't know why display : block is not working on them
If you just want to hide the options and then selectivly show them, hide and show are better options.
$("#Province").change(function(){
$("#CityList option").hide();
var id = "#CityList option[value = " + $("#Province option:selected").val() + "]" ;
$(id).show();
})
<html>
<script type="text/javascript">
function chkind1(){
var dropdown2 = document.getElementById('dropdown1');
var textbox = document.getElementById('textbox1');
textbox.value=dropdown1.value;
}
</script>
<script type="text/javascript">
function chkind2(){
var dropdown3 = document.getElementById('dropdown2');
var textbox = document.getElementById('textbox2');
textbox.value=dropdown2.value;
}
</script>
<input id="textbox1" name="size" type="text" />
<input id="textbox2" name="copies" type="text" />
<select onchange=chkind1()' id='dropdown1'>
<option value='Nil'>Select Print Size</option>
<option value = '$file - 5x7'>5x7</option>
<option value = '$file - 6x8'>6x8</option>
</select>
<select onchange='chkind2()' id='dropdown2'>
<option value = 'Nil'>Select how many Copies</option>
<option value = '1'>1</option>
<option value = '2'>2</option>
</select>
</html>
Hi all, trying to achieve on the first drop down box (size), is not to overwrite each selection but to append or add each selection one after the other. E.G 5x7, 6x8, etc etc.
I have had a go but can't seem to get it right, could I please have some help on this.
Cheers.
Change your value assignment to append your selection to the current value:
textbox.value += ' ' + dropdown1.value;
Add whatever characters in between the quotes to separate your entries.
UPDATE:
Per question in the comment to remove the value if it is selected again.
if(textbox.value.indexOf(dropdown1.value) == -1) {
textbox.value = textbox.value.replace(dropdown1.value, '');
} else {
textbox.value += ' ' + dropdown1.value;
}
Check to see if the value is contained in the string. indexOf returns -1 if the value is note present. Then you assign the value to be the string with that value removed.
Rather than over-write your previous textbox selection, add to it:
textbox.value += ", " + dropdown1.value;