FIDDLE LNK for my 3 select option. What i want to do is when on document.ready the Continent will be populated and then the country of the active continent will be load on the country and then the city will be loaded depending on the country.
Also i have input text when the user type into the textbox that will be the value that will appear on the select as a selected option.
In your submit button click code, you have to append new option to the drop down instead of updating the value. So instead of this:
$('#continentselect').val(continent);
$('#countryselect').val(country);
$('#cityselect').val(city);
Try this:
$('#continentselect').append('<option>' + continent + '</option>');
$('#countryselect').append('<option>' + country + '</option>');
$('#cityselect').val('<option>' + city + '</option>');
Also you need to update your js arrays i.e. country, continent and city with the newly entered values from the text-boxes.
Related
I have a database from which I generate options for the user to select from. Based on this selection, I submit these values to the same page and get the selections using javascript.
In the same form, I have a radio buttons and a multiple selection menu.
The html is generated as such:
Radio button and multiple option selection code:
htmlstr+="<select multiple>";
for (i=0; i<g.length;i++) {
htmlstr+="<option name='ges[]' value='" + g[i] + "'>" + g[i] + "</option>";
}
htmlstr+="</select><br>";
for (i=0; i<st.length;i++) {
htmlstr+="<input type='radio' name='sts' value='" + st[i] + "'>" + st[i] + "<br>";
}
These are both placed within a form, which then has a submit button.
Upon clicking the submit button, I want to know the values of the selections. I understand the multiple selection will be an array, but how do I get the array of values, and I cannot even get the value of the selected radio button. I have already tried getting the value using the .value attribute attached to the name, however this does not work.
There is not a real simple way of doing it. You'll have to check each option.
There is a HTMLSelectElement.selectedOptions interface that is documented. But it's not used much and I'm not sure of the browser support. Plus, it only applies to the select control and not the radio controls. You can check it out here though: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement
But for a more reliable method, try this...
For the select control, iterate through the selectControl.options array, and check each item for a selected attribute. If the selected attribute is true, then add that value to your own array.
Pseudocode:
for (var i in select.options) {
if (select.options[i] && select.options[i].selected) {
selectedOptions.push(select.options[i].value);
}
}
For the radio buttons, iterate through the array of objects in the dom (getElementsByName), and check the checked attribute. It it is true, add that value to your array.
Pseudocode:
for (var i in radios) {
if (radios[i] && radios[i].checked) {
selectedOptions.push(radios[i].value);
}
}
Here is a full working sample using your code:
jsFiddle: https://jsfiddle.net/mspinks/u890j86j/3/
User has selected a country from select list. The option is stored with var country = $('#select-list option:selected').text(); Now when user opens account edit page I would need the country to be selected by default when the page opens.
Only data I could use is the var country which could be in this case ´Great Britain´ and I need jquery to present Great Britain from the select list as selected. How should I do this
Using jQuery you can try this using contains selector. Like this:
$('#select-list').val( $( '#select-list option:contains("' + country + '")' ).val() );
And if value attribute in your <option> elements equal text content you can do this using only val() method:
$('#select-list').val( country );
Try this : use .filter to get the option which has same text as country variable value and set its value to select box
$('#select-list').val( $( '#select-list option').filter(function(){ return $(this).text()==country;}).val());
$('#select-list option["' + country + '"]').prop('selected', true)
I am using this code here, it pulls out the selected option value from a drop-down box named "attribute[466]" then puts that value into an input field with the id of text_qty_
jQuery(function($){
var $idval = $('#text_qty_');
$('select[name="attribute[466]"]').change(function(){
$idval.val($(this).val())
}).triggerHandler('change')
});
What I can't figure out is how to get the text from the option selected rather than the value.
As an added challenge the select element that contains the drop-down box has a randomly generated ID attribute.
Find the selected option and read the text
var txt = $(this).find('option:selected').text();
JSFiddle
I have a form with data which is to edit by user. I am getting form data using $http service of angularJS. I have done all, but I cannot make a select field's option selected (I am new in angularJS). I am setting select field's data in an array like below -
$scope.currency = [];
angular.forEach(data.currency, function(data) {
$scope.currency.push({
symbol: data.symbol,
alpha_code: data.alphaCode,
currency: data.currency
});
});
And in html, I am generating select field like below -
<select name="currency_advance" class="form-control" ng-model="invoice_currency">
<option ng-repeat="data in currency" data-type="{{data.symbol}}" value="{{data.alpha_code}}">{{data.alpha_code + '-' + data.currency}}</option>
</select>
Any solution how to make an option selected in angularJS?
You could change your like this;
<select ng-model="invoice_currency" ng-options="option.alpha_code as option.alpha_code + ' ' + option.currency for option in currency"></select>
And if you want to select the value in your select box do this step in your controller;
$scope.invoice_currency = "your select value"
Hope it helps.
You need to start thinking more angular! Check out the docs for ngSelect: http://docs.angularjs.org/api/ng.directive:select and use their directive instead of manually building the <select> yourself.
hi i am using Ajax AutoComplete for jQuery library
http://www.devbridge.com/projects/autocomplete/jquery/
there are 2 demos there .
in the first demo (Ajax auto-suggest sample (start typing country name))
when you select a country from the drop down that country and a image is added to a div
like this
<div id="selection"><img alt="" src="/global/flags/small/ht.png"> Haiti</div>
the selected dropdown value is Haiti how can i do this .
i want to do this when mouse clicking on drop-down value and also when press enter on selected drop-down value .
i tried but could not think a way ................. please help :(
In the autocomplete-parameters you can define an onSelect callback. Add the function to change the div with the id selection. E.g.:
$(>selector<).autocomplete({
...
onSelect: function(value, data) {
$('#selection').html('<img src="/global/flags/small/' + data + '.png" alt="" /> ' + value);
}
...
});