/    Sign up×
Community /Pin to ProfileBookmark

dropdown menu & radio button changes match each other

Copy linkTweet thisAlerts:
Sep 01.2007

I want a dropdown menu placed in the table with the same options as the radio buttons. When a change is made in using the dropdown menu then the radio button selection changes to match…and vice versa, when a change is made using the radio buttons then the dropdown menu changes to match. I do not know how to do this. Can someone please help me?

[code]
<html>

<head>
</head>

<body>

<table border=”1″ width=”800″ height=”200″>
<tr>
<td width=”100%”></td>
</tr>
</table>

<table>
<tr>
<td width=”800″ align=”center”>
<input type=”radio” name=”Selection” value=”123″> 123<br>
<input type=”radio” name=”Selection” value=”456″> 456<br>
<input type=”radio” name=”Selection” value=”789″> 789<br>
</td>
</tr>
</table>

</body>

</html>
[/code]

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@vwphillipsSep 01.2007 — [CODE]<html>

<head>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function Cng(obj,nme){
var frm=obj.form;
var val=obj.value;
var opts=(obj.type=='radio')?frm[nme].options:frm[nme];
for (var zxc0=0;zxc0<opts.length;zxc0++){
if (opts[zxc0].value==obj.value){
if (obj.type=='radio') frm[nme].selectedIndex=zxc0;
else frm[nme][zxc0].checked=true;
break;
}
}
}


/*]]>*/
</script></head>

<body>

<form>
<table border="1" width="800" height="200">
<tr>
<td width="100%" >
<select name="Sel1" onchange="Cng(this,'Selection');" >
<option value="" >Or Use</option>
<option value="123" >Or Use 123</option>
<option value="456" >Or Use 456</option>
<option value="789" >Or Use 789</option>
</select>
</td>
</tr>
</table>

<table>
<tr>
<td width="800" align="center">
<input type="radio" name="Selection" value="123" onclick="Cng(this,'Sel1');" > 123<br>
<input type="radio" name="Selection" value="456" onclick="Cng(this,'Sel1');" > 456<br>
<input type="radio" name="Selection" value="789" onclick="Cng(this,'Sel1');" > 789<br>
</td>
</tr>
</table>
</form>

</body>

</html>[/CODE]
Copy linkTweet thisAlerts:
@ScrabbleauthorSep 01.2007 — Thank you, Vic! That is perfect.
Copy linkTweet thisAlerts:
@ScrabbleauthorSep 02.2007 — As in the code below, when I add another column in, I am suddenly getting the error: "null" is null or not an object.

<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;script language="JavaScript" type="text/javascript"&gt;

function Cng(obj,nme){
var frm=obj.form;
var val=obj.value;
var opts=(obj.type=='radio')?frm[nme].options:frm[nme];
for (var zxc0=0;zxc0&lt;opts.length;zxc0++){
if (opts[zxc0].value==obj.value){
if (obj.type=='radio') frm[nme].selectedIndex=zxc0;
else frm[nme][zxc0].checked=true;
break;
}
}
}

&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;table border="1" width="800" height="200"&gt;
&lt;tr&gt;
&lt;td width="20%"&gt;
&lt;select name="Sel2" onchange="Cng(this,'Selection');" &gt;
&lt;option value="123" &gt;Or Use 123&lt;/option&gt;
&lt;option value="456" &gt;Or Use 456&lt;/option&gt;
&lt;option value="789" &gt;Or Use 789&lt;/option&gt;
&lt;/select&gt;
&lt;/a&gt;&lt;/td&gt;
&lt;td id="display" &gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

&lt;table&gt;
&lt;tr&gt;
&lt;td width="800" align="center"&gt;
&lt;input type="radio" name="Selection" value="123" onclick="Cng(this,'Sel2');"&gt; 123&lt;br&gt;
&lt;input type="radio" name="Selection" value="456" onclick="Cng(this,'Sel2');"&gt; 456&lt;br&gt;
&lt;input type="radio" name="Selection" value="789" onclick="Cng(this,'Sel2');"&gt; 789&lt;br&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

&lt;/body&gt;

&lt;/html&gt;
Copy linkTweet thisAlerts:
@vwphillipsSep 02.2007 — I assumed that the radio and select objects would be nested within the same form tags.


Is this a problem?
Copy linkTweet thisAlerts:
@vwphillipsSep 02.2007 — [CODE]<html>
<head>
<script language="JavaScript" type="text/javascript">

function Cng(obj,nme){
var frm=obj.form;
var val=obj.value;
var opts=[];
if (obj.type=='radio') opts=document.getElementById(nme).options;
else {
var zxcrads=document.getElementsByTagName('BODY')[0].getElementsByTagName('INPUT');
for (var zxc0=0;zxc0<zxcrads.length;zxc0++){
if (zxcrads[zxc0].name==nme) opts.push(zxcrads[zxc0]);
}
}
for (var zxc0=0;zxc0<opts.length;zxc0++){
if (opts[zxc0].value==obj.value){
if (obj.type=='radio') frm[nme].selectedIndex=zxc0;
else frm[nme][zxc0].checked=true;
break;
}
}
}

</script>
</head>

<body>
<form>
<table border="1" width="800" height="200">
<tr>
<td width="20%">
<select id="Sel2" onchange="Cng(this,'Selection');" >
<option value="123" >Or Use 123</option>
<option value="456" >Or Use 456</option>
<option value="789" >Or Use 789</option>
<option value="7891" >Or Use 7891</option>
</select>
</a></td>
<td id="display" ></td>
</tr>
</table>

<table>
<tr>
<td width="800" align="center">
<input type="radio" name="Selection" value="123" onclick="Cng(this,'Sel2');"> 123<br>
<input type="radio" name="Selection" value="456" onclick="Cng(this,'Sel2');"> 456<br>
<input type="radio" name="Selection" value="7893" onclick="Cng(this,'Sel2');"> 7893<br>
<input type="radio" name="Selection" value="789" onclick="Cng(this,'Sel2');"> 789<br>
</td>
</tr>
</table>
</form>
</body>

</html>[/CODE]
×

Success!

Help @Scrabble spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...