hi i am newbie to javascript....
i want to synchronize scrolling of two select boxes, so that when i scroll down the first select box the scroll bar of another select box also scrolls....
$(document).ready(function(){
$('#one').scroll(function(){
var length = $(this).scrollTop();
$('#two').scrollTop(length);
});
});
JS Bin Demo
in plain javascript the you would create an event handler for the scroll event that reads the scrollTop value from the relevant element and sets the same value on the second element.
var s1 = document.getElementById('Select1');
var s2 = document.getElementById('Select2');
function select_scroll(e) {
s2.scrollTop = s1.scrollTop;
}
s1.addEventListener('scroll', select_scroll, false);
The following is very simple, and I just confirmed it works in FF 3.6
<form id=puser name=puser>
<select name=user_select1 onclick="document.puser.user_select2.selectedIndex = this.selectedIndex">
<select name=user_select2 onclick="document.puser.user_select1.selectedIndex = this.selectedIndex">
the issue i am facing is....
i have two select boxes with multiple selection enabled.When i select an element from first select box it scrolls into view the corrosponding element from the second list.The single selection goes fine in all browsers explorer,firefox,chrome.
now, if i select the first,last element from the first selection box the second select box does not scrolls into view the last selected element in chrome browser.although , it works fine in internet explorer and firefox but not in google chrome browser.please tell me where i am wrong or is it there a better way to do the same.
<html>
<head>
<script language="javascript">
function SyncListsL(){
for (var i = 0; i <= [document.puser.user_select.length]-1; i++) {
if(document.puser.user_select.options[i].selected == true)
{
document.puser.user_select2.options[i].selected=true; document.puser.user_select.options[i].selected=true;
}
else{
document.puser.user_select2.options[i].selected = false;
document.puser.user_select.options[i].selected=false;
}
}
}
function SyncListsR(){
for (i = 0; i <= [document.puser.user_select2.length]-1; i++) {
if(document.puser.user_select2.options[i].selected == true)
{
document.puser.user_select.options[i].selected=true; document.puser.user_select2.options[i].selected=true;
}
else{
document.puser.user_select.options[i].selected = false;
document.puser.user_select2.options[i].selected=false;
}
}
}
</script>
<title>scrollintoview</title>
</head>
<body bgcolor="e2dbc5">
<form name="puser" >
<table align="center">
<tr>
<td align="right" bgcolor="#eeeadd"> <font size=2>
<select name="user_select2" multiple size="5" onChange="SyncListsR()" style="width:35mm">
<option value="a1" title="a1">a1</option>
<option value="a2" title="a2">a2</option>
<option value="ab" title="ab">ab</option>
<option value="abc" title="abc">abc</option>
<option value="e1" title="e1">e1</option>
<option value="e2" title="e2">e2</option>
<option value="new" title="new">new</option>
</select>
</font></td>
<td align="left" bgcolor="#eeeadd"> <font size=2>
<select name="user_select" multiple size="5" onChange="SyncListsL()" style="width:50mm">
<option value="first" title="first">first</option>
<option value="last" title="last">last</option>
<option value="ghi" title="ghi">ghi</option>
<option value="User" title="User">User</option>
<option value="ed" title="ed">ed</option>
<option value="edit" title="edit">edit</option>
<option value="second" title="second">second</option>
</select>
</font></td>
</tr>
</table>
</form>
</body>
</html>
Related
I have the following code written in HTML:
<table cellspacing="0" cellpadding="0" width="100%" class="HeaderTable">
<tbody><tr>
<td id="dnn_ctr6707_TimeTableView_TdClassesList" class="HeaderClassesCell">
class
<select name="dnn$ctr6707$TimeTableView$ClassesList" onchange="javascript:setTimeout('__doPostBack(\'dnn$ctr6707$TimeTableView$ClassesList\',\'\')', 0)" id="dnn_ctr6707_TimeTableView_ClassesList" class="HeaderClasses">
<option selected="selected" value="14">a</option>
<option value="15">b</option>
<option value="16">c</option>
<option value="17">d</option>
<option value="49">e</option>
<option value="60">f</option>
</select></td>
What i'm trying to do, is programmly click the option 'b' In the console tab. for some reason it doesn't work for me altho it seems good I think.
Here's what I tried:
var x = document.getElementById('dnn_ctr6707_TimeTableView_ClassesList') // this part work
var y = x.options[1].click() // I managed to get the text of the option but I want it to perform click and it doesn't work that way :(
Thank you for your help!
I think what you want to do is set the value of the select instead of clicking on the option.
Try this instead:
document.getElementById('dnn_ctr6707_TimeTableView_ClassesList').value = "15"
Here is some simple code that lets you enter an index into a text field and the pick that index from the <select> element.
var btn = document.querySelector('#select');
var inp = document.querySelector('#inp');
var sel = document.querySelector('#dnn_ctr6707_TimeTableView_ClassesList');
btn.addEventListener('click', function() {
var val = parseInt(inp.value, 10);
sel.selectedIndex = val;
});
class
<select name="dnn$ctr6707$TimeTableView$ClassesList" id="dnn_ctr6707_TimeTableView_ClassesList" class="HeaderClasses">
<option selected="selected" value="14">a</option>
<option value="15">b</option>
<option value="16">c</option>
<option value="17">d</option>
<option value="49">e</option>
<option value="60">f</option>
</select>
<hr/>
<input id="inp" type="text" value="0"/>
<button id="select">Select</button>
I think what your asking is for an event to be activated.
Javascript doesnt have a .click() function i believe.
var x = document.getElementById('dnn_ctr6707_TimeTableView_ClassesList');
var evt = new Event('click');
x.options[1].dispatchEvent(evt);
Tried all the answers on this q, but just can't get the count to display (or maybe the js to run?)
Here's my code .. I want the current count of selected items to update each time I select another
Any advice appreciated .. learning every day
<html>
<head>
<script type="text/Javascript">
function count_cars() {
var options = document.getElementById("cars").options, count = 0 ;
for (var i=0; i < options.length; i++) {
if (options[i].selected) count++;
} // end of for loop
// now put the current count in the element with id='car_count'
document.getElementById("car_count").innerHTML = count ;
} // end of function
</script>
</head>
<body>
<form name="test1" method="GET" action="test2.html">
How many cars have you got?
<table>
<tr><td>
<select multiple name="cars[]" value="" onchange="count_cars">
<option value="ford" >Ford </option>
<option value="saab" >Saab </option>
<option value="merc" >Merc </option>
<option value="audi" >Audi </option>
</select>
</td><td>Total : <div id="car_count"></div></td></tr>
<tr><td><input type="submit"></td></tr>
</table>
</form>
</body>
</html>
You were trying to access the select list option by id - but the select did not have an id. Also - its better to indent your code in a more readable fashion.
function count_cars() {
var options = document.getElementById("cars").options, count = 0 ;
for (var i=0; i < options.length; i++) {
if (options[i].selected) count++;
} // end of for loop
document.getElementById("car_count").innerHTML = count ;
} // end of function
<form name="test1" method="GET" action="test2.html">
How many cars have you got?
<table>
<tr>
<td>
<select multiple id="cars" name="cars[]" value="" onchange="count_cars()">
<option value="ford" >Ford </option>
<option value="saab" >Saab </option>
<option value="merc" >Merc </option>
<option value="audi" >Audi </option>
</select>
</td>
<td>
Total : <div id="car_count"></div>
</td>
</tr>
<tr>
<td>
<input type="submit">
</td>
</tr>
</table>
</form>
You can use the filter feature.
const options = document.getElementById("cars").options;
const count = [...options].filter(option => option.selected).length;
Don't forget to set an the cars id to your select.
You can use selectedOptions.
It contains a list of the elements contained within the element that are currently selected.
It is an HTMLCollection object with one entry per currently selected option
var count = document.getElementById("cars").selectedOptions.length;
and display it using
document.getElementById("car_count").innerHTML = count ;
I have these conditional drop lists behaving on screen as expected, but I cannot get the selected values from the drop downs to output in the HTML form (I can if I don't include the javascript). Only the text inputs are outputing as per the xml result below (Company & Add1). I want the xml to contain the Location from the first drop down, and the selected city from the conditional 2nd drop down.
<body>
<form action="http://TESTPLANETPRESS:8080/ObtainQuote" method="GET" >
<fieldset>
<legend>Location</legend>
<select id="country" class="source" onchange="updateSelectTarget()">
<option value="England">England</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
</select>
<select id="England">
<option value="Birmingham">Birmingham</option>
<option value="Liverpool">Liverpool</option>
<option value="London">London</option>
</select>
<select id="France" class="hidden">
<option value="Lyon">Lyon</option>
<option value="Marseille">Marseille</option>
<option value="Paris">Paris</option>
</select>
<select id="Germany" class="hidden">
<option value="Berlin">Berlin</option>
<option value="Hamburg">Hamburg</option>
<option value="Munich">Munich</option>
</select>
<label for="Company">Company:</label><input type="text" name="Company" value="Google">
<label for="Add1">Add1:</label><input type="text" name="Add1" value="1 Nowhere Street">
</fieldset>
<input type="submit" value="Submit">
</form>
<script>
function updateSelectTarget () {
var id = this.options[this.selectedIndex].value;
var targets = this.parentNode.getElementsByTagName("select");
var len = targets.length;
for (var i = len - 1; i > 0; --i) {
if (targets[i].id == id) {
targets[i].style.display = "block";
}
else {
targets[i].style.display = "none";
}
}
}
function initChangeHandler () {
var el = document.getElementById("country");
el.onchange = updateSelectTarget;
el.onchange();
}
window.onload = initChangeHandler;
</script>
</body>
Current XML result, (Does not include the results from the two drop downs).
<?xml version="1.0"?>
-<request type="GET">
<paths count="0"/>
-<values count="2">
<Company>Google</Company>
<Add1>1 Nowhere Street</Add1>
</values>
Do you want the value attribute or the text? Based on Get selected value in dropdown list using JavaScript? (similar to the first part), .value should work for the value attribute and .text for the text that is selected.
Also, please make two different questions instead of one question with 2 questions nested inside.
Please can someone help?
I have the below select list:
<td>Call Lead Type: </td>
<td>
<select name="CallLeadType" id="CallLeadType">
<option value=""></option>
<option value="LSG Service warm transfer from Claims">LSG Service warm transfer from Claims</option>
<option value="IVR Direct Call">IVR Direct Call</option>
<option value="Transfer from EE Agent">Transfer from EE Agent</option>
<option value="Dropped Line">Dropped Line</option>
<option value="Test Call from EE">Test Call from EE</option>
</select>
</td>
When the user selects "Transfer from EE Agent" I need four new input boxes to appear but not appear when any of the other options are selected?
So I assume it's an onchange code it needs?
I'm just not sure how
Thanks in advance for your help
Padders
You will require some javascript code to display other fields when a specific value is selected in combo box. I have used simple javacript code so that everyone can understand it quickly.
First add the other fileds within the table and hide them with style property display:none
<tr id="other_fields" style="display:none">
<td>Other Fields</td>
<td>
<input type="text" value="field1"/>
<input type="text" value="field2"/>
<input type="text" value="field3"/>
<input type="text" value="field4"/>
</td>
</tr>
I have assigned this row an id other_fields, so in onchange event if the value matches with the required one then we will show it otherwise hide it.
Secondly, Add the following javascript function and call it in on load function. This will attach an ebent handler to this select box.
<script type="text/javascript">
function onload() {
document.getElementById("CallLeadType").onchange = function (e) {
if (this.value == 'Transfer from EE Agent') {
document.getElementById("other_fields").style.display="";
} else {
document.getElementById("other_fields").style.display="none";
}
};
}
</script>
Finally in body tag call this function:
<body onload="onload()">
See the working example at:
http://jsfiddle.net/YpVGE/1/
Hope this helps
$('#CallLeadType').on('change', function()
{
if ( $('.CallLeadType option:selected').val() == 'Transfer from EE Agent' )
{
//create inputs here
}
});
you can use jquery
$('select[name=CallLeadType]').on('change',function(){
if ( $(this).val() == 'Transfer from EE Agent' )
{
//create inputs here
}
});
$('#CallLeadType').live("change",function(){
var Id=document.getElementById("CallLeadType");
var value = Id.options[Id.selectedIndex].text;
if(value=="Transfer from EE Agent"){
// your code to add textboxes
}
});
You could use this, this should be fired even you click on dropdown list and before blur event get fired (compared to simple onchange event):
{oninput event support: http://help.dottoro.com/ljhxklln.php}
var timeoutChange;
$('#CallLeadType').on('change input paste propertychange', function()
{
clearTimeout(timeoutChange);
timeoutChange = setTimeout(function(){
//code your logic here
},0);
});
<td>Call Lead Type: </td>
<td>
<select name="CallLeadType" id="CallLeadType">
<option value=""></option>
<option value="LSG Service warm transfer from Claims">LSG Service warm transfer from Claims</option>
<option value="IVR Direct Call">IVR Direct Call</option>
<option value="Transfer from EE Agent">Transfer from EE Agent</option>
<option value="Dropped Line">Dropped Line</option>
<option value="Test Call from EE">Test Call from EE</option>
</select>
<input type="text" class="transferInput"/>
<input type="text" class="transferInput"/>
</td>
$(function(){
$('.transferInput').hide();
$('#CallLeadType').on('change', function(){
$('.transferInput').hide();
if ( $('#CallLeadType').val() == 'Transfer from EE Agent' ){
$('.transferInput').show();
}
});
});
You need basically two things, an event (.change) which you can trigger when you change the value of the element 'select' and a pseudo-class (:selected) that permit to get the current value of your select, so you can create the correct condition that show the four inputs when you choose 'Transfer from EE Agent' and hide when you not select that option.
Change your Html in this way:
<td>Call Lead Type: </td>
<td>
<select name="CallLeadType" id="CallLeadType">
<option value=""></option>
<option value="LSG Service warm transfer from Claims">LSG Service warm transfer from Claims</option>
<option value="IVR Direct Call">IVR Direct Call</option>
<option value="Transfer from EE Agent">Transfer from EE Agent</option>
<option value="Dropped Line">Dropped Line</option>
<option value="Test Call from EE">Test Call from EE</option>
</select>
<!-- add the inputs and hide them -->
<div id="inputsTEEA" style="disply:hide">
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
</div>
</td>
javaScript:
$(function(){
var $inputsTEEA = $('#inputsTEEA');
// every time that you choose a different item in the select, this event is triggered
$('#CallLeadType').change(function(){
var
$select = $(this),
//pseudo class selected, you get the value of the currently option selected
valSelect = $select.find('option:selected').val();
if(valSelect == 'Transfer from EE Agent'){
$inputsTEEA.show();
}
else{
$inputsTEEA.hide();
}
});
});
I have a work code for one select field with other option, that displays a text box when other is selected. However, I'm having trouble writing the code for 2 select boxes on the same page.
Here is my script.
function toggleField(val) {
var o = document.getElementById('other');
(val == 'Other') ? o.style.display = 'block': o.style.display = 'none';
}
<SELECT NAME="i_skate" SIZE="1" ONCHANGE="toggleField(this.value);">
<OPTION VALUE="Just a Fan">Just a Fan</OPTION>
<OPTION VALUE="Everyday">Everyday</OPTION>
<OPTION VALUE="Few times a Week">Few times a Week Week
</OPTION>
<OPTION VALUE="Few times a Month">Few times a Month Month
</OPTION>
<OPTION VALUE="Other">Other</OPTION>
</SELECT>
<INPUT TYPE="TEXT" NAME="other" ID="other" STYLE="display: none;" SIZE="20">
</TD>
<TD WIDTH="10" ALIGN="LEFT"></TD>
<TD WIDTH="110" ALIGN="LEFT" VALIGN="TOP">
<SELECT NAME="my-style" SIZE="1" ONCHANGE="toggleField(this.value);">
<OPTION VALUE="Street Skate">Street Skate</OPTION>
<OPTION VALUE="Downhill">Downhill</OPTION>
<OPTION VALUE="Freestyle">Freestyle</OPTION>
<OPTION VALUE="Pools-Bowls">Pools-Bowls</OPTION>
<OPTION VALUE="Vert Halfpipe">Vert Halfpipe</OPTION>
<OPTION VALUE="Park">Park</OPTION>
<OPTION VALUE="Mini Ramp">Mini Ramp</OPTION>
<OPTION VALUE="Other1">Other1</OPTION>
</SELECT>
<INPUT TYPE="TEXT" NAME="other1" ID="other1" STYLE="display: none;" SIZE="20">
What am I missing?
If I'm understanding you correctly, you want to just have your second SELECT tag display the second INPUT box when "Other1" is selected, just like the first one does for "Other".
You are really close, but your Javascript needs some adjusting. You are currently testing for the changed element of "Other", and then altering the display for the object o which is a reference to the element with id of "other". You will need to expand on this logic to include your new select box (with option of "Other1") and the corresponding INPUT box.
So, you might need to do something like...
<SCRIPT TYPE="text/javascript">
function toggleField(val) {
var o = document.getElementById('other');
var o1 = document.getElementById('other1');
(val == 'Other')? o.style.display = 'block' : o.style.display = 'none';
(val == 'Other1')? o1.style.display = 'block' : o1.style.display = 'none';
}
</SCRIPT>
That will expand the same functionality from the first SELECT to the second.