Why selected value of select gets change in dynamic dropdown? - javascript

I have some code in which two select boxes are present. One select is dynamically changing its value with respect to the first one. The first select box is this in which some values are coming from backend using PHP.
<select class="form-control" name="tsm_id" id="tsm_id">
<option value=""><b>SELECT TSM</b></option>
<?php echo fill_year($connect); ?>
</select>
A second select box is this which is dependent on the first one. When any value in the first box is selected this select box change its value dynamically.
<select class="form-control" name="sr_id" id="sr_id">
<option value="" selected>SELECT SR</option></select>
But the problem is this that when I select any value in first select box then the selected value SELECT SR disappears and only values from backend comes there. I want that if anyone select value from first select box then SELECT SR remains there as selected value the rest values comes below that. I am using javascript code to append those options.
$(document).ready(function(){
$('#tsm_id').change(function(){
var tsm_id = $(this).val();
$.ajax({
url:"http://localhost/salesforce/fetch_sr.php",
method:"GET",
data:{tsm_id:tsm_id},
dataType:"json",
success:function(data){
// var data=JSON.stringify(data);
$('#sr_id').html('');
for (var i in data)
{
$("#sr_id").append("<option value="+data[i].employee_id+">"+data[i].employee_name+"</option>");
}
}
});
});
});
Can anyone tell me what am I doing wrong in this.
What i want is if someone selects value from the first select box then second select box remains same as in image with selected value set to SELECT SR and the options should be appended below it.
I want something like this:
I don't want like this if I am selecting a value from the first select box then the second select box displaying options, not the default value.
Presently I am getting like this:

$('#sr_id').html('');
This is removing the default option on ajax success.
You might want to use:
$('#sr_id').html('<option value="" selected>SELECT SR</option>');

You're currently removing all options in your ajax callback before you loop out the new ones.
If you change
$('#sr_id').html('');
to
$('#sr_id').html('<option value="" selected>SELECT SR</option>');
that option will always be the first (and selected) value.

Related

Drop down to have default selected the first element of the list in html

I have a dynamic list to display on dropdown. But always the first element of the list should be selected by default on gui and later on user can select any other.
When I am trying to display the first element of the list in my drop down, that element repeated in the list and if user select any other element then that element is being repeated. Below is my code.
html code:
<select class="form-control" name="settingTabs" id="settingTabs" ng-model="mData.selectedTabName" ng-change="selectTab()" ng-init="mData.selectedTabName = mData.tabList[0].settingTabName" ng-options="settingTabs.settingTabName for settingTabs in mData.tabList">
<option value="">{{mData.selectedTab}}</option>
</select>
js code:
$scope.selectTab = function(){
var x = $scope.mData.tabList.indexOf($scope.mData.selectedTabName);
$scope.mData.selectedTab = $scope.mData.tabList[x].settingTabName;
}
Need help here so I can have only the list to display in dropdown and by default first element should be selected displayed from that list.
I myself got an answer so thought of posting this too. Since angular provide default option for drop down, so make that ng-if="false" will work here.
<option value="" ng-if="false">{{mData.selectedTab}}</option>

Manipulating select option selected value in DOM several times without page load

I am in an unfortunate position where I need to be able to copy entire blocks of HTML without the page reloading using javascript/jquery, including inputs and selects.
I have most of it working, but I'm stumped on the selects. In order for it to "copy" properly so the copy displays the selected value of where its copying from, I need to explicitly set the attribute "selected" on the copy from select. The problem is, if I change the value on a select that I will copy from, the previous selections "selected" attribute remains, and I don't know how to get rid of it.
Here is a link to the fiddle and below is the basic test to show you what I mean: fiddle. You'll need to inspect element on the select list and show all of the option tags.
Make a selection
Hit the Enter button
Observe the selected attribute go on the option you chose
Choose a different option
Hit the enter button
Observe that now two options have the selected attribute. At this point I need to get rid of the selected attribute from the step 3 observation
HTML:
<table>
<tr>
<td>
<select>
<option value="">Select One</option>
<option value="test1">Test1</option>
<option value="test2">Test2</option>
<option value="test3">Test3</option>
<option value="test4">Test4</option>
</select>
</td>
</tr>
</table>
<button onclick="enterTest()">Enter</button>
Javascript
function enterTest(){
var $selectedOption = $("select").children(":selected");
$selectedOption.attr("selected","selected");
}
No need to deal with options and selected attribute.
If the values are unique,
var $select = $("select");
function enterTest(){
$select.clone().val($select.val()).appendTo('body');
}
Demo
Otherwise, use selectedIndex:
$select.clone().prop('selectedIndex', $select.prop('selectedIndex'))
Demo

Marking a select control option as selected preventing the default value to be shown jQuery

I have a simple HTML select with options. What I do is - set an option of that control as selected just after the page is loaded. My question is - how can I do that so the users won't see the first option of the select and will see the select with the value from the DB set. Here's the example:
<select id="simpleSelect">
<option value = "1">One</option>
<option value = "2">Two</option>
<option value = "3">Three</option>
</select>
Setting the value as follows:
$("#simpleSElect").val(2);
Now the users will see the select with selected option "One" and it will flash changing the option to "Two" once the jQuery code is executed. This flashing does not look good and I'm curious if there's a way to prevent this flashing and show the users the select with directly "Two" selected.
Thanks.

Getting the last option of a drop down list

I seem to be unable to select an element of a drop down list and having the page to recognize the change. And as the option values are generated, I cannot click them directly, but have to make the selection by some kind of index/number.
So when I use this code to select the second option:
casper.evaluate(function()
{
document.querySelector('select[id="sub-product-select"]').selectedIndex = 2;
return true;
});
The second option is set - but the page does not recognize the change and does not change some depending values like price or activating the "buy" button of the same form.
The drop down selection looks like this:
<form id="form-product-add-to-cart" action="/cart/add">
<select id="sub-product-select">
<option value=""></option>
<option value="02T01S1-01"></option>
<option value="02T01S1-02"></option>
<option value="02T01S1-03"></option>
So question is:
How to not only select the the second entry, but make the page recognize it like it were clicked or got a "return" after selection?
Well, for me this code works :
this.mouse.down("select#sub-product-select");//press left button
this.mouse.up('select#sub-product-select > option:nth-of-type(2)');//release left button
Is your selector unique? How do you check the changes? Try slimerJS to see them in live (the press/release click).

jQuery `.val` reporting a value for a select, with no option selected

I have a select that looks like this:
<select id = "baz"
name = "Baz"
size = 1>
<option value="A1"> foo</option>
<option value="A2"> bar</option>
...etc
<option value="A99"> bat</option>
</select>
I've pulled this code from Firebug (and edited it), as the options themselves are read from the server by a CGI #include.
The value of the select is eventually read by JavaScript as follows:
var $input_baz = $("#baz");
...
var baz_pl = $input_baz.val();
Problem: the select is in a hidden div, and no selections have been made, but baz_pl contains the value A1. Why is .val() returning the first entry when nothing has been selected, and is there a simple fix for this? The select appears in a popup, and I can add code to detect if the popup 'Ok' button has been clicked, but I'd rather do it properly if possible.
The first option is always selected by default. You could add a dummy entry as first one, with a value that does not occur otherwise in the list.
For example:
<option value="-1">-- Please select --</option>

Categories