changeによって新たな選択肢を出現、させる方法

お世話になります。Jqueryの初心者ですが、下記のようにselect1の選択肢によりその下に新たな選択肢を分岐して出したいのですが、選択肢を変えるたびにtextareaやinputが増えていくので、それぞれのif文にremoveをつけたのですが、うまくいきません。
選択肢の順番により一部の「テーブルが消えてしまったりします。

selectのchangeにより新たなtextaraやinputを追加削除するために
どなたかアドバイスをいただけますでしょうか？

HTML
1  <tr>
2    <td>金額設定</td>
3    <td>
4    <select id="select1" size="3" class="" name="">
5    <option id="opget1" value="1">上限金額及び下限金額を設定する</option>
6    <option id="opget2" value="2">金額の目安から設定する</option>
7    <option id="opget3" value="3">金額を設定しない</option>
8    </select>
9  </td>
10  </tr>
11    <td id="outputtd1"></td>
12    <td id="outputtd2"></td>
13  <tr>

JavaScript
1$(function(){
2  var op1=$('#opget1').text();
3  var op2=$('#opget2').text();
4  var op3=$('#opget3').text();
5
6$('#select1').change(function(){
7 if ($(this).val()==1) {
8    $('#outputtd1').text(op1);
9    $('#b').remove();
10    $('#c').remove();
11    $('#outputtd2').append('<textarea>').attr('id','a');
12  }else if($(this).val()==2){
13    $('#outputtd1').text(op2);
14    $('#a').remove();
15    $('#c').remove();
16    $('#outputtd2').append('<input>').attr('type','text').attr('id','b');;
17  }else{
18    $('#outputtd1').text(op3);
19    $('#a').remove();
20    $('#b').remove();
21    $('#outputtd2').append('<input>').attr('type','text').attr('id','c');;
22  }
23
24})
25
26});

s8_chu

2017/03/21 00:11

id属性の値がユニークでないようですが、転記ミスでしょうか？

SugiuraY

2017/03/21 00:21

失礼致しました。転記間違いを一部修正致しました。

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

回答2件

$("セレクタ").append("要素").attr("属性","値");という記述だと、セレクタにattr関数で指定した属性と値が付与されてしまいます。今回の動作がうまくいかない原因はこれだと考えられます。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11    </style>
12</head>
13<body>
14<table>
15    <tbody>
16    <tr>
17        <td>金額設定</td>
18        <td>
19            <label>
20                <select id="select1" size="3" class="" name="">
21                    <option id="opget1" value="1">上限金額及び下限金額を設定する</option>
22                    <option id="opget2" value="2">金額の目安から設定する</option>
23                    <option id="opget3" value="3">金額を設定しない</option>
24                </select>
25            </label>
26        </td>
27    </tr>
28    <tr>
29        <td id="outputtd1"></td>
30        <td id="outputtd2"></td>
31    </tr>
32    </tbody>
33</table>
34<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
35<script>
36    $(function () {
37        var op1 = $("#opget1").text();
38        var op2 = $("#opget2").text();
39        var op3 = $("#opget3").text();
40
41        $("#select1").change(function () {
42            if ($(this).val() == 1) {
43                $("#outputtd1").text(op1);
44                $("#b").remove();
45                $("#c").remove();
46                $("#outputtd2").append($("<textarea></textarea>").attr("id", "a"));
47            } else if ($(this).val() == 2) {
48                $("#outputtd1").text(op2);
49                $("#a").remove();
50                $("#c").remove();
51                $("#outputtd2").append($("<input>").attr("type", "text").attr("id", "b"));
52            } else {
53                $("#outputtd1").text(op3);
54                $("#a").remove();
55                $("#b").remove();
56                $("#outputtd2").append($("<input>").attr("type", "text").attr("id", "c"));
57            }
58        });
59    });
60</script>
61</body>
62</html>
63