Help us understand the problem. What is going on with this article?

javascriptでselectboxとinput type="text"を連動させる方法

More than 1 year has passed since last update.

プルダウンとテキスト入力欄を連動させたい

プルダウンを選択したら入力欄を自動的に補完したいということがあると思います。
一個くらいなら決め打ちでもいいのですが、複数あるとなかなか面倒なのでまとめてonchangeに登録する方法も書いてみます。
環境としてはphpはあまり関係ありませんが、javascriptはes6以上で書いてます。
es6より前のverの場合はletやconstをvarに、for~ofはforEachなどに読み替えてください。

まずは一個の場合から

HTML

<body>
<form action="/test_next.php" method="post">
    <table>
        <tr>
            <th>商品名</th>
            <th>値段</th>
        </tr>
        <tr>
            <td><select name="itemName" title="itemName">
            <?php foreach ($items as $item) : ?>
            <option value="<?= $item['price'] ?>"><?= $item['name'] ?></option>
            <?php endforeach; ?>
            </select></td>
            <td><input type="text" value="" name="price"></td>
        </tr>
    </table>
    <button type="submit">送信</button>
</form>
</body>

PHP

<?php
$items = [
    [ 'id' => 1,
    'name' => 'Macbookpro',
    'price' => '150000'],
    [ 'id' => 2,
    'name' => 'Switch',
    'price' => '15000'],
    [ 'id' => 3,
    'name' => 'PS4',
    'price' => '25000'],
];
?>

javascript

これに対してselectboxとtextを連動させようと思います。

let itemName = document.querySelector('[name="itemName"]');
let price = document.querySelector('[name="price"]');
itemName.onchange = () => {
    price.value = itemName.value;
}

解説

HTMLの段階でoptionのvalueに入力欄に入れたい値をすでに設定しているので、
selectboxの選択済みの値を<select>要素のvalueから取得しています。
取得した値を入力欄のvalueにしておしまいです。

複数ある場合

HTML

<form action="/test_next.php" method="post">
    <table>
        <tr>
            <th>チェック</th>
            <th>商品名</th>
            <th>値段</th>
        </tr>
        <?php foreach ($users as $user) : ?>
        <tr data-name="item-list" id="<?= $user['id'] ?>">
            <td><input type="checkbox" value="1"></td>
            <td><select name="itemName[<?= $user['id'] ?>]">
            <?php foreach ($items as $item) : ?>
            <option value="<?= $item['price'] ?>"><?= $item['name'] ?></option>
            <?php endforeach; ?>
            </select></td>
            <td><input type="text" value="" name="price[<?= $user['id'] ?>]"></td>
        </tr>
        <?php endforeach; ?>
    </table>
    <button type="submit">送信</button>
</form>

PHP

<?php
$items = [
    [ 'id' => 1,
    'name' => 'Macbookpro',
    'price' => '150000'],
    [ 'id' => 2,
    'name' => 'Switch',
    'price' => '15000'],
    [ 'id' => 3,
    'name' => 'PS4',
    'price' => '25000'],
];
$users = [
    [ 'id' => 1,
    'name' => 'Mike'],
    [ 'id' => 2,
    'name' => 'Kuro']
];
?>

javascript

今回はミケさんとクロさんの二人のユーザに対してそれぞれフォームが用意されています。
ミケさんのプルダウンが選択されたらミケさんの入力欄が、クロさんのプルダウンが選択されたらクロさんの入力欄が補完されるようにしたいと思います。

let itemList = document.querySelectorAll('[data-name="item-list]');
for (const item of itemList) {
    let itemName = item.querySelector('[name="itemName[' + item.id + ']"]');
    let price = item.querySelector('[name="price[' + item.id + ']"');
    itemName.onchange = () => {
        price.value = itemName.value;
    }
}

解説

一個しかない場合に対して複数ある場合は一旦trタグの要素を取得しています。
カスタムデータ属性を指定することで複数の要素をまとめて取得してfor文で回しています。
あとはquerySelectorのnameの箇所に各ユーザのidを埋め込んで、それ以外は一個しかない場合と同じです。

最後に

他にももっといい方法や、ここはもっとこうした方が良いなどの意見がある方はコメントにて頂けますと幸いです。

編集履歴

  • selectboxで一つしか選択しない場合はselectのvalueで選択済みの値を取得できるよう修正。 ※selectboxにmultipleをつけている場合はfor分でselectboxの中身を回覧する必要があります。
  • 複数ある場合、class名で複数要素を取得していたが、微妙なのでカスタムデータ属性に修正。
gigosa
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした