selectの項目を生成してコントロールしたい

Question

まずjsonファイルなどからselect項目を生成し、次にselectで項目を選択すると、選択した内容の要素をHTMl上に生成されるようにしたい（最初から要素が生成されている場合もあり）です。
またその際、要素が生成されている項目はselectの内容から削除されるようにしたいと考えています。
そして新たに生成された要素を削除した場合には、再びselectの内容に入るようにしたいです。
jsonファイルからselectを生成することはできたのですが、
困っているのが選択した要素をselectから削除して、新たに要素を生成する方法と、要素が生成されている場合、selectからその内容を削除する方法が知りたいです。
またできれば、この内容をページ内に複数入れる予定ですので、スクリプトをある程度まとめられると理想的です。
（難しければそれぞれのスクリプトを記述予定です）

[
	{"id":1,"value":"yasai_01","name":"きゅうり"},
	{"id":2,"value":"yasai_02","name":"ねぎ"},
	{"id":3,"value":"yasai_03","name":"レタス"},
	{"id":4,"value":"yasai_04","name":"ナス"},
	{"id":5,"value":"yasai_05","name":"トマト"},
	{"id":6,"value":"yasai_06","name":"キャベツ"}
]

$(function () {
	$('.js-delete').click(function(){
		$(this).parent().remove();
		return false;
	});
	
	$.getJSON("js/yasai.json" , function(diploma) {
		var
		ulObj = $(".js-select_yasai"),
		len = diploma.length;

		for(var i = 0; i < len; i++) {
			ulObj.append($("<option>").attr({
				id:yasai[i].id,
				value:yasai[i].value
			}).text(yasai[i].name));
		}
	});
	
});

<p id="yasai_02">ねぎ<a href="" class="js-delete">削除</a></p><!--最初から項目が作られている場合もあり-->
<label class="form_select" for="form_select_yasai">
	<select class="js-select_yasai" id="form_select_yasai" name="yasai">
		<option value="野菜を追加" disabled selected>野菜を追加</option>
		<!--この場合、ねぎが最初からあるので読み込んだjsonのリストからネギは外した形でoptionにそれ以外のものを流し込みたいです。
		またoptionで例えばトマトなどを選択した場合、ねぎのpタグの下にトマトのpタグが作られ、optionのトマトは削除されるという挙動にしたいです。-->
	</select>
</label>
※似たような内容で例えば果物などがこの後に出てくる想定です。

スクリプト内では、selectでoptionを選んだら、その内容を取得して、整形してpタグに出力し、
HTML内のyasaiとついたidを取得し、番号が一致するoptionをリストから削除するという流れなのかなと思っていますが、やり方がわかりません。

あまりスクリプトに詳しくないので、できればサンプルを書いていただけると嬉しいです。
お手数をおかけしますが、よろしくお願いいたします。

Answer 1

修正版

<script>
$(function () {
  var yasai_all;
  $.ajax({
  url:'yasai.json',
  dataType:'json',
  }).done(function(data){
    yasai_all=data;
    view_yasai();
  });
  $('#main').on('click','.js-delete',function(e){
    e.preventDefault();
    $(this).closest('p').remove();
    view_yasai();
  });
  function view_yasai(){
    $('#form_select_yasai option:not(:first)').remove();
    $.each(yasai_all,function(){
      var name=$(this).get(0).name;
      if($.inArray(name,get_yasai())==-1){
        $('#form_select_yasai').append($('<option>').val(name).text(name));
      }
    });
  }
  function get_yasai(){
    return $('.list').map(function(){
      return $(this).text();
    }).get();
  }

  $('#form_select_yasai').on('change',function(){
    var idx=$(this).prop('selectedIndex');
    var val=$(this).val();
    $('#main').append($('<p>').append($('<span class="list">').text(val)).append($('<a href="#"  class="js-delete">').text('削除')));
    $(this).find('option').eq(idx).remove();
  });
});
</script>
<div id="main">
<p>
<span class="list">ねぎ</span><a href="#" class="js-delete">削除</a>
</p>
<p>
<span class="list">ナス</span><a href="#" class="js-delete">削除</a>
</p>
</div>
<label class="form_select" for="form_select_yasai">
    <select class="js-select_yasai" id="form_select_yasai" name="yasai">
        <option value="野菜を追加">野菜を追加</option>
    </select>
</label>

Comments

[cofcof]

丁寧なスクリプトありがとうございます！
大体理想どおりの動きをしたのですが、削除したpタグの項目はselectの選択肢に戻したいのです。
お手数おかけして申し訳ないのですが、そちらの修正方法も伺えると幸いです……！

[yambejp]

> pタグの項目はselectの選択肢に戻したい

ざっと書き換えておきました

[cofcof]

理想通りの動きでした！ありがとうございます！！
本当に助かりました！
内容読んで勉強させていただきます！！

[cofcof]

すいません、一点だけ追加で質問させてください。
こちらFirefoxで見た場合にうまく動かないのですが、原因教えて頂くこと可能でしょうか？
色々調べてみたのですが解決出来ませんでした。。