I'm using JavaScript for an editable table in Bootstrap. Three of the columns are dictated by dropdown values. When the values are "saved" they are converted into their proper text values, but I'm having trouble keeping their saved dropdown choices as the "default" when they come back to edit.
For example:
They enter '3' in their dropdown and save it. If they want to go back and edit (likely another field in the table), the dropdown that once held 3 now goes back to the default of 1.
Here's my code for edit:
function Edit() {
var par = $(this).parent().parent(); //tr
var tdDate = par.children("td:nth-child(1)");
var tdCellNum = par.children('td:nth-child(2)');
var tdButtons = par.children("td:nth-child(3)");
tdDate.html("<input type='date' id='txtDate' value='"+tdDate.html()+"'/>");
tdCellNum.html("<select id='txtCellNum'><option value=1>1</option>
<option value=2>2</option><option value=3>3</option></select>");
tdButtons.html("<img src='save.png' class='btnSave'/>");
Any idea on how to get the value from tdCellNum to display as the default in the dropdown?
I've tried setting the value of select =tdCellNum and tdCellNum.val and using Number to convert the object to a number.I've also tried setting a var=tdCellNum with the rest of the variables, then document.getElementById("tdCellNum").value=copyValue.html(); along with tdCellNum.val=copyValue but all to no avail.Any ideas?? Thanks!
Better to create the element and append it. This way you can use .val() to select the option.
var sel = $("<select id='txtCellNum'><option value=1>1</option><option value=2>2</option><option value=3>3</option></select>");
sel.val(tdCellNum.text());
tdCellNum.empty().append(sel);
You can use tdCellNum.text() to get the value in the field.
Then you could do:
tdCellNumInt=tdCellNum.text();
tdCellNum.html("<select id='txtCellNum'><option value=1>1</option> <option value=2>2</option><option value=3>3</option></select>");
tdCellNum.find("option[value='"+tdCellNumInt+"']").prop("selected",true);
Related
Hi I've been modifying a script that got the data from <span id=> to instead use a <option value=> from a dropdown list and it seems to work except for always choosing the first <option value=> in the list. If i arrange the order of the html list the first currency will be what it converts to onChange.
Here is the script and html
function ChangeCurrency() { $('select').click(function () {
var cc = $(this).children('option').attr('value').substring(1);
document.cookie = 'CurrencyId=' + cc + ';path=/';
var s = location.pathname;
if (s.length > 3 && s.substring(3, 4) == '/')
s = s.substring(3);
location.pathname = s;
})};
<select onchange="ChangeCurrency()">
<option value="c1">USD</option>
<option value="c2">EUR</option>
<option value="c3">AUD</option>
etc...
</select>
I don't know what I'm doing wrong? How can I get it to actually process a user selected option from the list (and hopefully keep that option displayed so the list doesn't show USD when the currency on the store is changed to AUD for example)
EDIT:
I need to keep how this code gathers data to "build" the cookie, I don't understand enough to know what string it is putting together from the option list to name the cookie but it is important for the store currency to work. This is the code that worked but the list was a div with span id for the option value. It took me a while to get it sort of working using option values rather than span id's except for being stuck on the first option in the list.
Your code just fetches the first option, not the selected one.
Change the:
var cc = $(this).children('option').attr('value').substring(1);
to:
var cc = $(this).val();
I don't know if my title is well understanding, but what i want to do it's to display a list in option of a select element depending of the choice of another select element. I'm using this with a jsp page and with a Map variable to have the differents lists.
The jsp page look like this:
<form:select id="typeIndice1" path="typeIndice" itemLabel="libelle" onchange="run()">
<form:options items="${listeIndices}" />
</form:select>
<form:select id="indices" path="indice" itemValue="valeur" itemLabel="libelle" >
</form:select>
The model attribute is "listeIndices" which is a Map with key, the data to display on the second select, and value, the wording of the data. I know normally i should do the reverse for the Key, Value but is to display the wording easily on the first select.
I have this script below:
<script>
function run(){
var select = document.getElementById("typeIndice1");
var input = document.getElementById("indices");
var option = document.createElement("option");
option.text = select.value;
input.options.add(option);
}
When an option is selected on the first select, the run function create a new option to the second select whit the value of the first select, i have the complete list in only one option, but i would like each row in one option but i don't know how to do.
i also tried:
option.items = select.value;
instead of
option.text = select.value;
But i have a blank option.
I'm trying to find the best way to make my teachers' lives a little easier.
I've got a select field and list of options generated by a tlist sql query. The select field itself already has a javascript attached to it, which fleshes out other field values (credit values and credit types) elsewhere based on the id of the select option chosen. This is the javascript that works for that purpose:
<script type="text/javascript">
function changeValue(){
var option=document.getElementById('courseno').value;
if(option=="E100"){
document.getElementById('credval').value="10";
document.getElementById('credtype').value="EngFresh";
}
else if(option=="E200"){
document.getElementById('credval').value="10";
document.getElementById('credtype').value="EngSoph";
}
}
</script>
I also need to populate a hidden field that is (and must remain) outside the tlist sql tag that generates the select list.
Here is my sql code:
<select id="courseno" name="course_number" onchange="changeValue();">
<option value="">Select a Course</option>
~[tlist_sql;
SELECT cc.course_number, cc.section_number, c.COURSE_NAME
FROM cc cc
RIGHT JOIN COURSES c ON c.COURSE_NUMBER = cc.course_number
RIGHT JOIN STUDENTS s ON cc.studentid = s.id
WHERE cc.studentid = ~(curstudid)
AND TERMID = ~(curtermid)
AND c.CreditType LIKE 'English%'
AND NOT EXISTS (
SELECT * FROM storedgrades sg
WHERE sg.studentid = ~(curstudid)
AND sg.course_number = c.course_number
)
ORDER BY c.course_name;]
<option name="~(course_no)" value="~(course_no)" id="~(secno)">~(course_no).~(secno) (~(cname))</option>
[/tlist_sql]
</select></td>
</tr>
And just below that is the hidden field I would like to populate:
<td width="25%" class="bold"> </td>
<td><input type="text" id="secnum" name="section_number" value=""> </td>
I gave each of the options the section number as its ID, thinking I could use the ID element of each of those options and some clever jquery to populate the hidden field, but I'm having no luck. I just read on another question that was ably answered by the community that you shouldn't use an option ID tag that begins with a number... so now what can I do?
Could somebody please help me?
Thanks forever,
Schelly
I don't think your problem comes from the ID being a number. We haven't seen what jQuery you've tried, but you most likely don't need jQuery at all. Assuming what you have is working correctly, and the PowerSchool code is putting out elements the way you expect them to be (View Source in your browser to be sure, if this doesn't work), you should be able to grab the ID from the selected option inside your changeValue function, store it in a variable, and push that value into the "secnum" field as follows:
function changeValue(){
var courseDropdown = document.getElementById('courseno');
var selectedElement=courseDropdown.options[courseDropdown.selectedIndex];
var option=selectedElement.value;
var courseNo = selectedElement.getAttribute("id");
if(option=="E100"){
document.getElementById('credval').value="10";
document.getElementById('credtype').value="EngFresh";
}
else if(option=="E200"){
document.getElementById('credval').value="10";
document.getElementById('credtype').value="EngSoph";
}
document.getElementById('secnum').value=courseNo;
}
I changed the way that your "option" variable is being set, but it will work the same way. You might end up wanting to move the last line, where the "secnum" field is being set, or wrap it in an "if", etc.; I don't know your full requirements.
All that said, there would be nothing wrong with using jQuery in this situation, but it's not necessary in this case unless you need extreme backwards-browser compatibility.
Working Example Here
You can use multiple on change events to do whatever you want. On change add a new event and populate the hidden input. You can define custom attributes to any html element with any data that is required to populate the hidden input
<select id="myselect">
<option>Select</option>
<option data-number="1">One</option>
<option data-number="2">Two</option>
<option data-number="3">Three</option>
<option data-number="4">Four</option>
<option data-number="5">Five</option>
</select>
<input type="hidden" id="hiddenInput"/>
$(document).ready(function(){
$('#myselect').on('change', mySelectChange);
function mySelectChange(){
console.log('your standard change value here');
}
$('#myselect').on('change', mySelectChange2);
function mySelectChange2(){
var option = $("#myselect option:selected");
console.log(option.text());
console.log(option.attr('data-number'));
}});
I have dropdownlist whose value is filled using the value of the other drop down. The problem here is that i need to bind the value of the second when the value of the first changes. I need to do it from the javascript.
Only thing i need to do is remove and add the select options in the second dropdown as the first dropdown changes.
How can i do this?
Thanks in advance.
Not too sure exactly what you want with the limited information provided but here is a solution that I think you are looking for:
HTML:
<select id="primary">
<option value="one">One</option>
<option value="two">Two</option>
</select>
<select id="secondary"></select>
jQuery:
var opts = {
'one':['a','b','c'],
'two':['d','e','f']
};
$('#primary').change(function(){
var select = [];
$.each(opts[this.value], function(k, v){
select.push('<option>'+ v +'</option>');
});
$('#secondary').html(select.join(''));
});
Demo: http://jsfiddle.net/28TQZ/
$("#dropdownlist1").change(function () {
var selected = $("#dropdownlist1 option:selected");
//clear
$("#dropdownlist2").html("");
$("#dropdownlist2").append($("<option/>").text(selected.text()).val(selected.val()));
})
Create all the drop downs you need, but only add options to the first one. The next ones only have a "default" value.
On selecting the first drop down, you use jQuery to get the values for the second drop down, based on the value selected in the first drop down:
$.post('ajax/aj_populate2nddropdown.php', $("#firstdropdown").val(), function(result) {
$('div.placedaround2nddropdown').html(result);
});
The file ajax/aj_populate2nddropdown.php collects the values of the second drop down, and returns them, inserted as options into the dropdown.
One simple way to do it is to just have a main dropdown and a bunch of secondary dropdowns that start hidden. when you choose something from the first, then you unhide the related second one
Try this If you are trying at client side
Replace your controls with asp.net server controls
<select id="kamal">
<option value"ACTIVE">a<option>
<option value"DISABLED">b<option>
<option value"DELETED">c<option>
</select>
I want to get the value displayed on the page..not the value shown in the option tag
I am interested in "aktiv" not "ACTIVE"
when i write document.getElementById("kamal").value;then the value that is select comes in the variable. But I want the displayed value.
Please help me how can I take this value.
NOTE: By using all the options given below, it will give me the value of the selected option, I want the label of the selected option. I mean the displayed value on html page.
The solution you are looking for is:
To get the value:
var element = document.getElementById("kamal");
var selectedValue = element.options[element.selectedIndex].value;
To get the text:
var element = document.getElementById("kamal");
var selectedValue = element.options[element.selectedIndex].text;
EDIT:
working example at:
http://jsfiddle.net/n85tW/6/
Try :
var sel = document.getElementById("kamal")
alert(sel.options[sel.selectedIndex].value);
Working example here
Note: your <option> tags should be closed with </option>
var element = document.getElementById("kamal");
var selectedValue = element.options[element.selectedIndex].innerHTML;
THis was the solution of my question.