I've got a dynamically populated <select> list, where the first option is created by HTML and PHP when the page first loads, but when you drop down, javascript populates a list of additional options. However, when I select an option and remove focus, it is reset to the original selected option. I'm pretty sure that what I'm doing is not getting saved, but I'm not sure how to fix it.
Here's the HTML, which works fine:
<select name="select1" id="select1" onfocus= "checkSelect(this.value)">
<option value ="XXX">XXX</option>
</select>
The checkSelect() function does a bunch of stuff, but then it ends as follows:
//do a bunch of stuff, ending in populating the 'legal' array.
document.input_form.select1.options.length=1;
//which I think is actually redundant
for (i=0; i < legal.length; i++)
{
document.input_form.select1.options[i+1]=new
Option(legal[i], legal[i], false, false);
}
Am I missing something necessary to make the option persist on the page?
The only reason I could think of such a behavior would be select1 wrapped into unclosed tag <label>, for example:
<label>label <!--may be missing </label> here -->
<select name="select1" id="select1" onfocus="checkSelect(this.value)">
<option value ="XXX">XXX</option>
</select> <!--may be missing </label> here -->
Related
I tried googling this but I am getting only on event trigger searches instead of what I am looking for.
I want to dynamically click on any of the options in the select dropdown by using the value or the text if possible.
HTML
<select id="certainspamselectid" name="certainspamselect" style="margin-left: 165px;">
<option value="0">permanently deleted</option>
<option value="4">moved to admin quarantine</option>
<option value="1">moved to junk email folder</option>
<option value="5">delivered to inbox with tag</option>
<option value="2">delivered to inbox</option>
</select>
I am not sure if I need to use something with $("#certainspamselectid").click..... but I am not sure what to use after click. I would have tried more things but my google searches keep pinpointing me for on event triggers when I just want to click on one of these options using either JS or jQuery.
I have read your problem and honestly, I can't understand what you want exactly.
However, it looks like you want to select some certain option of the select dropdown.
If that's right, you don't need to call some kind of click function.
You can do it easily with jQuery.
For example, imagine that you are going to select third option - "moved to junk email folder". Then you can select it by code like below.
$("#certainspamselectid").val(1);
If my answer is not enough for you, let me know detail of your problem.
With <select> what you need is .change instead of .click
Here is a quick example .. change the $value and check again
$("#certainspamselectid").on('change' , function(){
console.log("Value Changed To: "+$(this).val());
if($(this).val() == 5){
console.log("value 5 is selected");
}
});
let $value = 4;
$("#certainspamselectid").val($value).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="certainspamselectid" name="certainspamselect" style="margin-left: 165px;">
<option value="0">permanently deleted</option>
<option value="4">moved to admin quarantine</option>
<option value="1">moved to junk email folder</option>
<option value="5">delivered to inbox with tag</option>
<option value="2">delivered to inbox</option>
</select>
why don't you simply change the value of the select like this
$("#certainspamselectid").val(4)
It will automatically show the text from the selected option
I don't think that clicking on an option would help you
I have a <select> element which is filled by angular, and the options are properly displayed with the data in ctrl.servicios :
<select id="id_select_token" ng-model="ctrl.token" class="form-control input-sm"
ng-selected="ctrl.token == item.Clv_Servicio"
ng-change="ctrl.GetPrecioToken();"
ng-options="item as item.Descripcion for item in ctrl.servicios track by item.Clv_Servicio">
<option value="">Selecciona</option>
</select>
The issue is, I want this select to, by default, have the <option value="">Selecciona</option> selected. I've tried to add selected="selected" to that option, but it doesn't work. I also tried, on javascript, this:
let select_token_input = document.getElementById('id_select_token');
select_token_input.selectedIndex = 0;
But this also doesn't work, is angular overriding it?, how could I best achieve this?
I have a select list in a page that is initially as follows:
<select id="select-company-type" name="company_type">
<option value="">Company Type</option>
</select>
The options are then repopulated via a Mustache template when another select is changed
<script id="companyTypeOptionsTpl" type="text/template">
<option value="">Company Type</option>
{{#companies}}
<option value="{{title}}">{{title}}</option>
{{/companies}}
</script>
This works fine and the new option items appear in the drop down.
However, if I then try and select one of the options programatically with something like:
$('#select-company-type').val(selectedOption);
where selectedOption contains a string that matches one of the options - it doesn't work.
Also, even if I select an option manually, its value is not passed via GET or POST when the form is submitted.
It's as though the new options are not being recognised although they are visible.
Am I missing a trick here?
Thanks
I have a dropdown which must populate several other dropdowns depending on the option selected. I found a way how to do this using hidden fields. I created a hidden field for every sub dropdown with all its options. Then from my JS function, I check which selectedIndex is selected and then give the value of its respective hidden field.
This way works great, however, I am setting the value of the sub dropdown using the variable ID FROM the Js function. This reduces flexibility.
Does anybody know any other way how to pass all the parameters from the HTML?
Best method would be that all dropdowns are there but are not displayed. Upon change of the main dropdown, the respective sub drop down ONLY is shown.
Any ideas?
You should be able to do just what you want, have all the dropdowns hidden except the correct one.
<script type="text/javascript">
function changedropdown(index) {
dropdowns['dropdown1'].style.display='none';
dropdowns['dropdown2'].style.display='none';
dropdowns['dropdown3'].style.display='none';
dropdowns['dropdown4'].style.display='none';
dropdowns[index].style.display='inline';
}
</script>
<form name='dropdowns'>
<select onchange='changedropdown(options[selectedIndex].value)'>
<option selected value='dropdown1'>1</option>
<option value='dropdown2'>2</option>
<option value='dropdown3'>3</option>
<option value='dropdown4'>4</option>
</select>
<select name='dropdown1'>
<option selected value=1>dropdown1</option>
</select>
<select style='display:none' name='dropdown2'>
<option selected value=1>dropdown2</option>
</select>
<select style='display:none' name='dropdown3'>
<option selected value=1>dropdown3</option>
</select>
<select style='display:none' name='dropdown4'>
<option selected value=1>dropdown4</option>
</select>
</form>
If I understand the issue, the hidden values are not being returned in your post? To get around this issue I run a routine on submit that grabs all the hidden values and puts them into non hidden inputs of type hidden.
So...assuming you use jquery that would be something along the lines of
<div id='hiddenValues'></div>
<script type='text/javascript'>
function onSubmit() {
var hiddenValue = $('$yourHiddenSelectBox').val();
$('#hiddenValues').append("<input type='hidden' name='someId' value='" + hiddenValue + "'>";
}
</script>
I have a list of countries, html, they have numeric ids and country name:
Ex:
<select name="userDto.nationality" id="userDto.nationality">
<option value="">Seleccione</option>
<option value="1">Alemania</option>
<option selected="selected" value="2">Argentina</option>
<option value="8">Australia</option>
<option value="9">Austria</option>
<option value="10">Bélgica</option>
<option value="11">Bolivia</option>
</select>
Im trying to use a jquery script to get the country of the list, not the value, the name and paste it inside of a label.
$(document).ready(function() {
$("#userDto\\.nationality option:selected").click(function() { $("#nationalityLabel").html(this.value); });
});
And the HTML that should get the country name is:
<div name="userLabelDiv" id="nationalityUserLabelDiv">
<label class="required">Nacionalidad :</label>
<label id="nationalityLabel"></label>
</div>
Could someone guide me through the problem? I cant find where is my error in the JS code.
Thank you
Two little things:
change selector from $("#userDto\\.nationality option:selected")
to $("#userDto\\.nationality")
change event handler from click to change
Done.
$(document).ready(function() {
$("#userDto\\.nationality").change(function() {
$("#nationalityLabel").html(this.value);
});
});
Why:
Your current code would have worked, but only for "Argentinia" since it is selected by default. With your selector option:selected you bound the event handler only to selected option elements, which is, Argentinia.
So you need to add an event handler to the select element itself. The change handler fires whenever you change the selection. I guess that is your desired result.