I am dynamically setting the options of my select-fields. Every time the form changes, new data is received from a Servlet and the current selections are overwritten.
Problem here is, that if I select an option, the form loads the javascript function, and I loose my selection / focus.
var capacityOptionsAsString = "";
for(var i = 0; i < capacityArray.length; i++) {
capacityOptionsAsString += "<option value='" + capacityArray[i] + "'>" + capacityArray[i] + "</option>";
console.log('capacity option: ' + capacityOptionsAsString);
}
$("select[name='inptCapacity']").find('option').remove().end().append($(capacityOptionsAsString));
Any idea how to keep the selection?
Edit: Maybe I was not clear enough. I want to keep the selection. So it has to be validated, if the option is selected, if it is, we have to select it again.
Just set the focus again:
$("select[name='inptCapacity']").focus();
Update
get selected option:
var selected_value = $("select[name='inptCapacity'] option:selected").val()
Do your changes
$("select[name='inptCapacity']").find('option').remove().end().append($(capacityOptionsAsString));
Select it again:
$('select[name='inptCapacity'] option[value="' + selected_value + "]').attr('selected', 'selected');
You totally need an id for your select ;)
$('select[name="inptCapacity"]').is(':focus');
$('form[name="formName"] :input').change(function() {
// keep the select focus always on input change
$('select[name="inptCapacity"]').focus();
});
Related
I have a select element that populates another select on change. Everything works fine, but I want to automatically set the value of the new select to the first item in the array.
$.get($(this).data('url'), {
option: $(this).val()
}, function(data) {
var subcat = $('#models');
var options = " ";
subcat.empty();
$.each(data, function(index, element) {
options += "<option value='" + element.id + "'>" + element.name + "</option>";
});
subcat.append(options);
});
What I want to do is to set the selected value of models to first item.
Your option variable is just a string, and you can't append a string like that to the subcat object and have it turn into <option>s automatically.
Instead try one of these methods inside your $.each() function:
subcat.append($("<option value='" + element.id + "'>" + element.name + "</option>"));
or:
subcat.append($("<option/>").val(element.id).text(element.name));
The first option should be selected by default.
Fiddle
In my Angularjs application, I need to return select drop down with its selected option dynamically. So I have used the following function:
function getCellRendererMapping(data) {
if (data.order == 6) {
return function(params) {
params.$scope.payRateRegDataOptions = data.data;
var dynamicScopename = "data.' + params.colDef.field + data.order +'"
$scope.dynamicScopename = data.data[0];
// console.log("dynamic scope value" + $scope[dynamicScopename]);
return '<select ng-options="eachPayRate.text for eachPayRate in payRateRegDataOptions" name="payrate_s' + params.column.index + '" id="payrate_s' + params.column.index + '" ng-model="dynamicScopename"></select>';
}
}
}
So what happening is that the dropdown is correctly forming and is populating nicely with the dropdown options too. But the problem I am facing is the default set option in the dropdown is not working out, even though I have used the following code to set the default option, my ng-model, (dynamicScopename) is not getting set.
$scope.dynamicScopename = data.data[0];
I think that you should add ng-selected="dynamicScopename" hope it helps.
return '<select ng-options="eachPayRate.text for eachPayRate in payRateRegDataOptions" name="payrate_s' + params.column.index + '" id="payrate_s' + params.column.index + '" ng-model="dynamicScopename" ng-selected="dynamicScopename"></select>'
I am using C# asp.net. On button click I am generating a dropdown by using Javascript.
<scripttype="text/javascript">
var counter = 0;
function AddFileUpload() {
//debugger;
var div = document.createElement('DIV');
div.innerHTML = '<input id="file' + counter + '" name = "file' + counter + '"Type="file"/>' +
'<select id="Droplist' + counter + '" name="droplst"/>' +
'<option value="SCR">Student Count request</option>' +
'<option value="DRO">Documents recieved from others</option>' +
'<option value="TE">total estimates</option>' +
'<option value="PRE">Presentation</option>' +
'<option value="PRI">Pricing</option>' +
'<option value="Quest">Questions to student</option>' +
'<option value="RelvExp">RelevantExperience-Case Studies</option>' +
'<option value="ResReq">Resource requests</option>' +
'<option value="SSP">Student submitted paper</option>' +
'<option value="WIP">WIP</option>' ;
document.getElementById("FileUploadContainer").appendChild(div);
counter++;
}
</script>
I am accessing the dropdown values in page behind like this
string val = Request.Form["droplst"];
It is working fine,but what I am receiving is option value. Like "SCR" when "Student Count request" is selected. is there any way to access the selected value like "Student Count request" instead of getting the option value?
Please let me know if the question is vague and further clarification is required.
Are the values of the options necessary? The easiest change to make would be to remove the values. E.g:
<option>Student Count request</option>
If you do require the values, then it's a bit more tricky: you have added the dynamic control to the page using JavaScript, so the code behind won't be able to find it easily. You could add an ASP HiddenField control to the page, then when a dropdown is selected, populate that hiddenfield with the text value using JQuery/JavaScript. Then in the code behind you can access the value of the hidden field (which will be the dropdown selected text).
Do you understand? You can read further here which is a duplicate of this question and has already been answered: How to access dropdown text (not value) using Request.Form()?
I have a dropdown whose options get filled dynamically:
function populateDropdown(dropdownNum) {
// invokeWebService uses $.ajax
json = invokeWebService("GET", "/webservice/dropwdownOptions");
optionsHtml = "";
$.each(json, function(count, jsObj) {
optionValue = jsObj.name
optionsHtml+="<option>" + optionValue + "</option>";
});
var dropdownId = "#NRdropdown_" + dropdownNum;
$(dropdownId).html(optionsHtml);
}
function display(blockNum) {
var url = "/webservice/blocks" + blockNum;
var response = invokeWebService("GET", url);
var replacementHtml = "";
var currBlock = "blah";
$.each(response, function(i, block) {
currName = block.name;
var textfield = "<input type='text' id='blockValue" + block.id +
"'>";
var dropdownMenu = "<select id=\"NRdropdown_" + i +
"\"onClick=\"populateDropDown(" + i +
")\"><option>Existing Blocks</option>"
var submitButton = "<input type='submit' value='UPDATE' id='" +
block.id + "'><br><br>";
replacementHtml = currName + textfield + dropdownMenu + submitButton;
});
$("#main").html(replacementHtml);
}
The javascript function "populateDropdown(dropdownNum)":
Makes the ajax request
Parses the json response for the option values into an html string called optionsHtml
Replaces the inner html of the select element with the option values via:
var dropdownSelector = "#NRdropdown_" + dropdownNum;
$(dropdownSelector).html(optionsHtml)
1) When I click on the dropdown arrow, I STILL see "Existing Blocks".
2) After 1 sec I see the first dynamically generated option UNDERNEATH the "Existing Blocks" option, I don't see the other dynamically generated options.
3) Then I click outside the dropdown and see the dropdwon showing the first dynamically generated value.
4) Finally I click the dropdown arrow again and it works as it should with all the dynamically generated values.
How do I make it work so that:
When the page first loads, the dropdown shows "Existing Blocks".
Once I click the dropdown arrow, the dropdown should show all dynamically generated values without the "Existing Blocks" value.
Thanks!
the dropdown listener should be for onmousedown, not onclick
I have a problem with using a chosen-select plugin.
I have many select boxes and I made it using javascript code.
I want to reset all my select box when I change my "default-chosen" class, but in my screen the showing text is a default message ("select an option ...") not a my message "not chosen".
This is not real code, but similar.
function appendSelectBox(i) {
$(myTable).append(
"<select id=\select-a" + i + "\" class=\"form-control chosen-select for-history select-a\">" +
"<option value=\"-1\">not chosen</option>" +
"</select>");
}
for (var i = 0; i < 10; i++) {
appendSelectBox(i);
}
$(".select-term").chosen().change(function(event) {
var trIndex = tableForm.getTrIndex($(this));
tableForm.addTermUrl(trIndex);
});
$(".default-chosen").chosen().change(function(event) {
// here is the code that remove selected option and set default value
})
I tried all codes like bottom codes.
$('.select-a').find('option:first-child').prop('selected', true).end().trigger('chosen:updated');
$('.select-a').find('option').removeAttr('selected').end().trigger('chosen:updated');
$('.select-a').val(-1).trigger("chosen:update");
$('.select-a').val(-1).trigger("liszt:update");
$('.select-a').val("-1").trigger("chosen:update");
$('.select-a').val("").trigger("chosen:update");
please help,, :[
In my case, my chosen change event listener was reset, so I have to re-register in my code..