急いでいます！

JavaScriptでセレクトボックスの選択値をinputのvalue値にしたい

解決済

質問者：tanakappp
質問日時：2017/10/27 14:56
回答数：3件

以下でセレクトボックスの選択値をinputのvalueにしたいのですが、上手く行きません。
何処を修正すれば良いのでしょうか？

<html lang="ja">
<head>
<meta charset="UTF-8">
</head>

<body>
<form name="js">
<select name="txtb" onchange="document.getElementById('txtb').value=this.value">
<option value="">*A•B選択</option>
<option value="">A</option>
<option value="">B</option>
</select>

お名前：<input type="text" name="txtb" id="txtb" value="" type="hidden"><br>
<input type="button" value="歓迎１" onclick="tbox1()"><br>
<input type="button" value="消去" onclick="clr()"><br>
</form>

<script>

//テキストボックスの文字を取得する
function tbox1(){

var str1=document.js.txtb.value;
alert("ようこそ"+str1+"さん！");

}
//テキストボックスの文字を操作する
function clr(){

document.js.txtb.value="";

}

</script>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： Ogre7077
回答日時：2017/10/27 18:41

更にすっきりと整頓しました

<form name=js>
<select name=txta>
<option value="">*A•B選択</option>
<option value=A>A</option>
<option value=B>B</option>
</select>
お名前：<input type=text name=txtb value=""><br>
<button type=button name='btna'>歓迎1</button>
<button type=button name='btnb'>消去</button>
</form>

<script>
addEventListener('DOMContentLoaded',function(){
var form = document.querySelector('form[name=js]');
var txtb = form.elements['txtb'];
var greet = name => alert('ようこそ' + name + 'さん!');
form.elements['txta'].addEventListener('change', (ev) => txtb.value = ev.target.value, false);
form.elements['btna'].addEventListener('click', () => greet(txtb.value), false);
form.elements['btnb'].addEventListener('click', () => txtb.value = '', false);
}, false);
</script>

- 0
- 件

通報する

No.2

回答者： yambejp
回答日時：2017/10/27 16:56

全体的にグダグダなのでちょっと整理しました

- 0
- 件

通報する

No.1

回答者： fujillin
回答日時：2017/10/27 16:16

こんにちは

name属性やidが重複していたりするので、どの要素を参照なさりたいのかはっきりしませんね。

select要素のonchangeで値が反映されないのは、各optionのvalue値が""になっているからです。
（実際には、空の文字列が転記されています。）
optionのvalueにA、Bなどを入れておけば、現状のスクリプトのままで反映されるようになるでしょう。
HTMLは今のまま変えずにということであれば、選択されたoptionの表示文字を取得することで、A、Bなどを代入することも可能です。
右辺の this.value を this.options[this.selectedIndex].textContent などとすればよろしいかと。

関数tbox1、clrで操作したい対象はinput要素という解釈で良いでしょうか？
（あるいはtbox1では、select要素のほうを参照したいのかも？機械にもわからないと思います。）
とりあえずinputのほうだと仮定するとして、input要素にはidが設定されていますので、これを利用するのが確実です。
　document.js.txtb.value
　　　↓　↓　↓
　document.getElementById("txtb").value

なお、ご提示のようにnameやidが重複している要素を正しく指定し分けるのなら、単に名前等をドット記法で接続するのではなく、querySelectorなどを用いる方法が有効だと思います。
（CSSのセレクタとほぼ同じ指定方法で要素を指定できます）
https://developer.mozilla.org/ja/docs/Web/API/Do …