Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

JavaScript match Drop Down Box list

Posted on 2011-05-03
5
Medium Priority
?
384 Views
Last Modified: 2012-05-11
I've been working from the instructions from JS Example Site and only need to copy the result to another drop down box.
The need for this is to cross-reference records and import as required. There are a few other drop down boxes but I want each one to be able to be updated individually.

So far I have the below code in.

I had it working in one way but only with the Radio button and it seemed to be 1 record off.
I also want to run it from an input button instead of Radio.

Any ideas?

<head>
<script type="text/javascript">
function dataDD_copy()
{

if(document.form1.copyi[0].checked){ //Using copyi as another script does just textboxes with 'copy'

for(i=document.form1.impRegionID.options.length-1;i>=0;i--)
{
if(document.form1.impRegionID.options[i].selected)
document.form1.ExistRegion.options[i].selected=true;
}

}

}

</script>
</head>
<body>
<form name="form1">
.....
<select name="impRegionID">

<option value="1">North</option>
<option value="2">Region X</option>
<option value="3" selected>Region Y</option>
<option value="4">Region Z</option
</select>

<!-- input type="button" name="copyi" value="->" onclick="dataDD_copy()"; --> **** Would prefer to run from a button over a Radio select
<input type="radio" name="copyi" value="yes" onclick="dataDD_copy()";>Update


<select name="ExistRegion">
<option></option>
<option value="1">North</option>
<option value="2">Region X</option>
<option value="3">Region Y</option>
<option value="4" selected>Region Z</option
</select>

....
</form>
</body>

Open in new window

0
Comment
Question by:kiwistag
  • 3
5 Comments
 
LVL 6

Author Comment

by:kiwistag
ID: 35511878
I dummied in the below code beside the radio button as by itself it seems to bomb out..
<input type="hidden" name="copyi" value="no" onclick="dataDD_copy()";>

Open in new window


It also seems that the JS won't accept if there is already a selected record in ExistRegion as it then chooses the record prior. (in one trial..)
0
 
LVL 13

Accepted Solution

by:
ansudhindra earned 800 total points
ID: 35511906
This works as expected.
try and let me know in case anything more needed

 
<head>
<script type="text/javascript">
function dataDD_copy()
{

//if(document.form1.copyi[0].checked){ //Using copyi as another script does just textboxes with 'copy'

for(i=document.form1.impRegionID.options.length-1;i>=0;i--)
{
if(document.form1.impRegionID.options[i].selected){

	document.form1.ExistRegion.options[i+1].selected=true;}
}

//}

}

</script>
</head>
<body>
<form name="form1">
.....
<select name="impRegionID">

<option value="1">North</option>
<option value="2">Region X</option>
<option value="3" selected>Region Y</option>
<option value="4">Region Z</option
</select>

<!-- input type="button" name="copyi" value="->" onclick="dataDD_copy()"; --> **** Would prefer to run from a button over a Radio select
<input type="button" name="copyi" value="yes" onclick="dataDD_copy()";>Update


<select name="ExistRegion">
<option></option>
<option value="1">North</option>
<option value="2">Region X</option>
<option value="3">Region Y</option>
<option value="4" selected>Region Z</option
</select>

....
</form>
</body>

Open in new window

0
 
LVL 5

Assisted Solution

by:SimonDard
SimonDard earned 200 total points
ID: 35513373
For any manipulation of HTML elements I recommend using jQuery (http://www.jquery.com) instead of plain JavaScript, because it will make the code work cross-browser as well as better readable.

In this example (after adding an id to every input with the same contents as the name):
$("#copyi").click(function() {
  $("#ExistRegion").val($("#impRegionID"))
});
0
 
LVL 6

Assisted Solution

by:kiwistag
kiwistag earned 0 total points
ID: 35591023
Awesome - Thank You!!!
0
 
LVL 6

Author Closing Comment

by:kiwistag
ID: 35714932
Great help.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question