初心者です。
リストボックスAの値をボタンクリックによってリストボックスBに移すとき、
適当な値の文字色を変更したいのですができるでしょうか?
valueを1と0に区別してボタンクリックで1のものだけ色をつけてリストボックスに追加されるようにしたいです。
教えてください。説明が下手かもしれませんが、よろしくお願いします。

()はvalue
A(0)    A
B(0) →  B 
C(1)    C(←この文字色を変化)
D(0)     D

このQ&Aに関連する最新のQ&A

A 回答 (1件)

こんにちはmikaninuさん、xruzです。


こんな感じでしょうか?かなりハズしている気がするんですが。。。

<html>
<head>
<title></title>
</head>
<script language="JavaScript">
<!--
function lstCopy(){with(document.frm){
if(lst1.selectedIndex==(-1)) {alert("You NoSelect!");return;}
lst2.length=lst2.length+1;
lst1.options[lst1.selectedIndex].value="1";
lst2.options[(lst2.length-1)].text=lst1.options[lst1.selectedIndex].text;
lst2.options[(lst2.length-1)].value=lst1.options[lst1.selectedIndex].value;
lst2.options[(lst2.length-1)].style.color="red"
}}
//-->
</script>
<body style="font-size:24" bgColor="seashell">
<form method="post" name="frm">
<table><tr><td>listA<br>
<select name="lst1" size="4">
<option value="0">aaaa
<option value="0">bbbb
<option value="0">cccc
<option value="0">dddd
<option value="0">eeee
<option value="0">ffff
</select>
</td><td valign="center"><br>
<input type="button" name="btn" value="->Add->" onClick="lstCopy();">
</td><td>listB<br>
<select name="lst2" size="4">
<option value="0" style="color:black">oooo
<option value="0" style="color:black">pppp
</select>
</td></tr></table>
</form>
</body>
</html>

がんばってくださいね(~:~i
    • good
    • 0
この回答へのお礼

ありがとうございました。
上手く色が変わりました。
前回に引き続きありがとうございます。
がんばります。

お礼日時:2001/11/01 21:31

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qcheckboxをクリックしてリロードした際、クリックしたcheckboxのvalueの値を保持したい。

checkboxをクリックした後、リロードをしてクリックされたcheckboxのvalueの値を表示したいと思っております。
ただ、下記のソースでは動作しませんでした。
リロード時のvalueの値の引渡し方法に問題があるのだろうと思いますが、どう記述すればよいか分かりませんでした。
その為、どのような記述を行えばよいかアドバイスをいただければと思います。

【ソース】
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript">
function load() {
window.alert(value);
}
</script>
<title>title</title>
</head>

<body onload="load();">
<p>valueは1<input type="checkbox" name="checkbox1" value="1" onclick="location.reload()" onkeypress="location.reload()" /></p>
<p>valueは2<input type="checkbox" name="checkbox2" value="2" onclick="location.reload()" onkeypress="location.reload()" /></p>
<p>valueは3<input type="checkbox" name="checkbox3" value="3" onclick="location.reload()" onkeypress="location.reload()" /></p>
</body>
</html>

以上、よろしくお願いします。

checkboxをクリックした後、リロードをしてクリックされたcheckboxのvalueの値を表示したいと思っております。
ただ、下記のソースでは動作しませんでした。
リロード時のvalueの値の引渡し方法に問題があるのだろうと思いますが、どう記述すればよいか分かりませんでした。
その為、どのような記述を行えばよいかアドバイスをいただければと思います。

【ソース】
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/x...続きを読む

Aベストアンサー

ちょっと手を抜いているけど、こんな感じでいけるのでは?

<script>
window.onload=load;
function load() {
var f=document.getElementById("f0");
var v="";
var s=location.search.substr(1).split("&")
for(var i=0;i<f.length;i++){
if(f[i].type=="checkbox"){
f[i].onclick=function(){ this.form.submit(); }
f[i].onkeypress=function(){ this.form.submit(); }
for(var j in s){
if(s[j]==f[i].name+"="+f[i].value) f[i].checked=true;
}
if(f[i].checked) v+=(v==""?"":",")+f[i].value;
}
}
alert(v)
}
</script>

<form id="f0">
<p>valueは1<input type="checkbox" name="checkbox1" value="1" /></p>
<p>valueは2<input type="checkbox" name="checkbox2" value="2" /></p>
<p>valueは3<input type="checkbox" name="checkbox3" value="3" /></p>
</form>

ちょっと手を抜いているけど、こんな感じでいけるのでは?

<script>
window.onload=load;
function load() {
var f=document.getElementById("f0");
var v="";
var s=location.search.substr(1).split("&")
for(var i=0;i<f.length;i++){
if(f[i].type=="checkbox"){
f[i].onclick=function(){ this.form.submit(); }
f[i].onkeypress=function(){ this.form.submit(); }
for(var j in s){
if(s[j]==f[i].name+"="+f[i].value) f[i].checked=true;
}
...続きを読む

Qプルダウン形式リストボックス(コンボボックス)の値を変更したい

こんにちは!
教えて下さい。

チェックボックスとコンボボックスがあります。
コンボボックスの一つ目の値は(any)、二つ目以降はDATAです。
デフォルトでは、「チェック無し、コンボボックスの値(any)、コンボボックスは使用不可」にしています。
チェックボックスをチェックするとコンボボックスを使用出来、コンボボックスの値をあるDATAにしたとします。

ここで問題なのですが、この地点でチェックボックスを外した時、コンボボックス
の値を(any)と表示させたいのです。(コンボボックスも使用不可)
コンボボックスの表示されている値を任意に変えれるのでしょうか?

初心者なもので、すごく簡単な質問だったらお許し下さい。

Aベストアンサー

コンボを初期状態に戻したいという事ですよね?
それでしたら例えば、

 document.forms( 'formA' ).elements( 'comboA' ).selectedIndex = 0 ;

とすれば、「 formA 」というフォーム内の「 comboA 」の選択状態を先頭の項目に
戻せます。

QチェックボックスのON/OFFでValueの値を変える方法が分かりません。

チェックボックスをONにしたらValue=1、OFFにしたらValue=0で送信するJavaScriptがどうしても分かりません(><)
元のCGIを変更せず、JavaScriptだけで変更する方法を教えてください!お願いします!

Aベストアンサー

質問にあいまいな点があります。

>チェックボックスをONにしたらValue=1
なんのバリューが1なのでしょうか?
単純にcheckboxのvalueが1なら、
<input type="checkbox" value="1" name="hoge">
とするとチェックされている場合は1を返します。
ただし、チェックがはずれてもvalue=0は返しません。
なぜならcheckboxのcheckedがfalseの際には
値を返さない決まりがあるためです。

どうしても明示的に特定の名前に対して0を返さなくては
いけないなら以下のようにしてはどうでしょうか?

<form action="hogehoge.cgi">
<input type=checkbox onClick="this.form.hoge.value=((this.checked) ? 1:0)">
<input type=hidden value="0" name="hoge">
<input type=submit value="send">
</form>

質問にあいまいな点があります。

>チェックボックスをONにしたらValue=1
なんのバリューが1なのでしょうか?
単純にcheckboxのvalueが1なら、
<input type="checkbox" value="1" name="hoge">
とするとチェックされている場合は1を返します。
ただし、チェックがはずれてもvalue=0は返しません。
なぜならcheckboxのcheckedがfalseの際には
値を返さない決まりがあるためです。

どうしても明示的に特定の名前に対して0を返さなくては
いけないなら以下のようにしてはどうでしょうか?

<form act...続きを読む

Qチェックボックスのvalueを、テキストボックスに挿入したい

文末のように、4つのチェックボックスと1つのテキストボックスがあります。

(1) チェックボックスのチェックに伴い各チェックボックスのvalueを
そのままテキストボックスの方に転記したいです。

(2) 逆に、チェックが外れたら、該当する valueをクリアしたいです。

(3) 鉄道~航空の一つ以上にチェックが入っている間、テキストボックス自体
をreadonlyにし、手動でいじれなくしたいです。
逆に、全てのチェックが解除されている間は、自由記述可能です。

(4) チェックする前に何らかの値が入っていたら、それらは強制クリアして、
valueの方を優先したいです。

イメージとして、「鉄道」と「航空」にチェックが入ったら、テキストボックスの値は
「新幹線 在来線 ヘリコプタ ジャンボ 」となります。
現在、テキストボックスはReadOnlyです。

そして「鉄道」の方だけチェックが解除されたら、テキストボックスの値は
「ヘリコプタ ジャンボ 」となります。テキストボックスは、まだReadOnlyです。

さらに「航空」のチェックも解除されたら、テキストボックスの値は
空白「」となります。テキストボックスのReadOnlyも解除されます。

<html>
<head>
</head>
<body>
<form method="post" action="samp.php" id="query" name="query">
<input type="checkbox" class="norimono" name="norimono[]" value="新幹線 在来線 ">鉄道
<input type="checkbox" class="norimono" name="norimono[]" value="軽 セダン クーペ ">四輪車
<input type="checkbox" class="norimono" name="norimono[]" value="小型 中型 大型 ">二輪車
<input type="checkbox" class="norimono" name="norimono[]" value="ヘリコプタ ジャンボ ">航空
<input value="" size="50" type="text" name="keyword">
</form>
</body>
</html>

文末のように、4つのチェックボックスと1つのテキストボックスがあります。

(1) チェックボックスのチェックに伴い各チェックボックスのvalueを
そのままテキストボックスの方に転記したいです。

(2) 逆に、チェックが外れたら、該当する valueをクリアしたいです。

(3) 鉄道~航空の一つ以上にチェックが入っている間、テキストボックス自体
をreadonlyにし、手動でいじれなくしたいです。
逆に、全てのチェックが解除されている間は、自由記述可能です。

(4) チェックする前に何らかの値が入っ...続きを読む

Aベストアンサー

さいきんがんばってるみたいですから
わからないはずないと思うんですけどねぇ・・・

<html>
<head>
<script language="javascript">
function check(f){
f.keyword.value="";
for (var i=0; i<f.length;i++){
if(f[i].className=="norimono" && f[i].checked==true){
f.keyword.value += f[i].value;
}
}
f.keyword.readOnly=(f.keyword.value!="");
}
</script>
</head>
<body>
<form method="post" action="samp.php" id="query" name="query">
<input type="checkbox" class="norimono" name="norimono[]" onClick="check(this.form)" value="新幹線 在来線 ">鉄道
<input type="checkbox" class="norimono" name="norimono[]" onClick="check(this.form)" value="軽 セダン クーペ ">四輪車
<input type="checkbox" class="norimono" name="norimono[]" onClick="check(this.form)" value="小型 中型 大型 ">二輪車
<input type="checkbox" class="norimono" name="norimono[]" onClick="check(this.form)" value="ヘリコプタ ジャンボ ">航空
<input value="" size="50" type="text" name="keyword">
</form>
</body>
</html>

さいきんがんばってるみたいですから
わからないはずないと思うんですけどねぇ・・・

<html>
<head>
<script language="javascript">
function check(f){
f.keyword.value="";
for (var i=0; i<f.length;i++){
if(f[i].className=="norimono" && f[i].checked==true){
f.keyword.value += f[i].value;
}
}
f.keyword.readOnly=(f.keyword.value!="");
}
</script>
</head>
<body>
<form method="post" action="samp.php" id="query" name="query">
<input type="checkbox" class=...続きを読む

Qリンク文字クリックでラジオボタン選択、テキストボックス表示したい

次のようにハイパーリンク文字列、ラジオボタン、テキストボックスが並んでいます。

<html>
<head></head>
<body>
<a href="#">りんご</a>
<a href="#">みかん</a>
<a href="#">いちご</a>
<input type="radio" name="select" value="0" checked >りんご
<input type="radio" name="select" value="1">みかん
<input type="radio" name="select" value="2">いちご
<input size="40" name="label" type="text" value="りんご" readonly>
</body>
</html>

ここで、各ハイパーリンク文字列をクリックした瞬間に、

(1) 該当するラジオボタンが選択される
(2) ラベルがテキストボックスに表示される

というように動作させたいのです。

また、<a href="#">とすると画面を再読み込みしてしまうようなので、
再読み込みされない書き方についてもご教示いただけますとまことに
幸いです。よろしくお願い致します。

次のようにハイパーリンク文字列、ラジオボタン、テキストボックスが並んでいます。

<html>
<head></head>
<body>
<a href="#">りんご</a>
<a href="#">みかん</a>
<a href="#">いちご</a>
<input type="radio" name="select" value="0" checked >りんご
<input type="radio" name="select" value="1">みかん
<input type="radio" name="select" value="2">いちご
<input size="40" name="label" type="text" value="りんご" readonly>
</body>
</html>

ここで、各ハイパーリンク文字列をクリッ...続きを読む

Aベストアンサー

とりあえず、普通に書くとこんなかんじでしょうか。

<html>
<body>
<form>
<a href="javascript:setFruit('0','りんご')">りんご</a>
<a href="javascript:setFruit('1','みかん')">みかん</a>
<a href="javascript:setFruit('2','いちご')">いちご</a>
<input type="radio" name="select" value="0" checked >りんご
<input type="radio" name="select" value="1">みかん
<input type="radio" name="select" value="2">いちご
<input size="40" name="label" type="text" value="りんご" readonly>
</form>
<script language="javascript">
function setFruit(num1,num2){
//alert(1);
var f=document.forms[0];
f.select[num1].checked=true;
f.label.value=num2;
}
</script>
</body>
</html>

とりあえず、普通に書くとこんなかんじでしょうか。

<html>
<body>
<form>
<a href="javascript:setFruit('0','りんご')">りんご</a>
<a href="javascript:setFruit('1','みかん')">みかん</a>
<a href="javascript:setFruit('2','いちご')">いちご</a>
<input type="radio" name="select" value="0" checked >りんご
<input type="radio" name="select" value="1">みかん
<input type="radio" name="select" value="2">いちご
<input size="40" name="label" type="text" value="りんご" readonly>
...続きを読む


人気Q&Aランキング

おすすめ情報