selectボックスで選択された内容をテキストエリアに出力するプログラムで特定のoptionタグを出力しないようにする方法

現在selectボックスで選択した内容をtextareaに表示することはできたのですが、optionタグの一番上にある「ご用件を選択してください」の文言も出力されてしまいます。
どのようにすれば、その文言のみを出力させないようにできるのかご教示ください。
よろしくお願いします。

html
1<!DOCTYPE HTML>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <title></title>
7    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
8        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
9        crossorigin="anonymous"></script>
10
11    <!--Bootstrap CSS -->
12    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
13</head>
14
15<body>
16    <form action="">
17        <select id="shortCut">
18            <option value="">ご用件を選択してください</option>
19            <option value="0">面接できました</option>
20            <option value="1">営業できました</option>
21            <option value="2">掃除に来ました</option>
22        </select>
23
24        <textarea name="" id="span" cols="30" rows="10"></textarea>
25    </form>
26
27
28
29
30    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
31        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
32        crossorigin="anonymous"></script>
33    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
34        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
35        crossorigin="anonymous"></script>
36    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
37        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
38        crossorigin="anonymous"></script>
39
40    <script>
41
42        function clickBtn() {
43            const str = document.getElementById("shortCut").value;
44
45            document.getElementById("span").textContent = str;
46        }
47
48        let result = document.querySelector("#span");
49        let select = document.querySelector("#shortCut");
50
51        select.addEventListener("change", function () {
52
53
54            let options = this.options;
55            result.textContent = options[options.selectedIndex].text;
56        });
57
58
59
60    </script>
61</body>
62
63</html>

行動規範の内容に同意します

回答1件

ベストアンサー

valueとって空ならreturnすれば良いのでは。

投稿2020/09/04 02:25

m.ts10806

総合スコア80875

soso0programmer

2020/09/04 02:44

let options = this.options; let req = document.getElementById('req'); if (req === "") return; result.textContent = options[options.selectedIndex].text; このようにしてみても出力されてしまうのですが間違っていますでしょうか。

m.ts10806

2020/09/04 02:49

どこにも「req」というIDの要素はないようですが

soso0programmer

2020/09/04 02:56

<form action=""> <select id="shortCut"> <option value="" id="req">ご用件を選択してください</option> <option value="0">面接できました</option> <option value="1">営業できました</option> <option value="2">掃除に来ました</option> </select> <textarea name="" id="span" cols="30" rows="10"></textarea> </form> 申し訳ありません。記載していませんでした

m.ts10806

2020/09/04 02:58

getElementById()が得られるのはElement自身です。 https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById 取れなければnullなので === ""　が成り立つことはないですね。ちなみに私は回答で「valueとって」と書いています。

soso0programmer

2020/09/04 03:24

下記の内容で実現することができました。ありがとうございます！ <form action="" name="form1"> <select id="shortCut" name="select1"> <option value="" id="req">ご用件を選択してください</option> <option value="0">面接できました</option> <option value="1">営業できました</option> <option value="2">掃除に来ました</option> </select> <textarea name="" id="span" cols="30" rows="10"></textarea> </form> select.addEventListener("change", function () { let options = this.options; const select = document.form1.select1; const num = select.selectedIndex; const str = select.options[num].value; if (str === "") return; result.textContent = options[options.selectedIndex].text; });

m.ts10806

2020/09/04 03:27 編集

解決されたようで何よりです。ちなみに、optionが動かないならindex==0でも良いですよ。

soso0programmer

2020/09/04 03:55

ありがとうございます！

行動規範の内容に同意します