select optionを選択しテーブルに追加したい

Question

したいこと・わからないこと
１．select optionで選択したところの情報を保存
２．ボタンクリックorダブルクリックでテーブルに追加
３．select optionから追加したものを非表示にする
※．すでに追加されているものは追加しない。

<select id="fruit">
<option value= "150円">リンゴ</option>      
<option value= "200円">ブドウ</option>      
<option value= "150円">レモン</option>      
</select>

<input type="button" value="追加" disabled>

<table>
<thead>
<tr>
<th>名前</th>
<th>単価</th>
</tr>
</thead>

<tbody>
...

$(function(){
    $('option[value]').click(function(){
        var fruits = $('option[value]:selected').val();
      $("button").prop("disabled", false);
    });
  });

$(function(){
    $('button').click(function(){
        $('tbody')
        .append('<tr ></tr>');
    });
  });

Comments

[m.ts10806]

「保存」は何を意図していますでしょうか。
３つのそれぞれの要件、個々に調べると出てくる情報は少なくないかと思いますが、自身で調べたこと試したことはあるのでしょうか。

Answer 1

こんにちは、下のような感じで出来ると思います。

        <select id="fruit">
            <option value="150円">リンゴ</option>
            <option value="200円">ブドウ</option>
            <option value="150円">レモン</option>
        </select>

        <input type="button" value="追加" />

        <table>
            <thead>
                <tr>
                    <th>名前</th>
                    <th>単価</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>

$(function () {
    //追加ボタンをクリックした時
    $("input[type='button']").on("click", function (evt) {
        //選択中のオプションの取得
        var option = $("#fruit option:selected");
        //既にテーブルに追加されているかの確認（追加されている場合optionがdisabledになっている）
        var is_disabled = option.attr("disabled");
        //テーブルに追加されている場合何もせず。
        if (is_disabled) {
            return;
        }
        //フルーツの名前を取得
        var name = option.text().trim();
        //フルーツの値段を取得
        var price = option.val().trim();
        //テーブルに追加するのでoptionをdisabledに設定する。
        option.attr("disabled", "disabled");
        //tbodyを取得
        var target = $("tbody");
        //tbodyにフルーツの名前と価格のhtmlを追加。
        target.append("<tr><td>" + name + "</td><td>" + price + "</td></tr>");
    });
});

Comments

[shoshi]

回答ありがとうございます！
期待通りの動作になりました。