2

テキスト フィールドの値を使用して入力されている選択リストがあります。入力した値を選択リストに追加する追加ボタンと、入力した値を選択リストから削除する削除ボタンの 2 つのボタンもあります。jQueryを使用して次のことをしたいと思います：

  1. テキスト フィールドに入力された値が選択リストで使用できない場合は、追加ボタンを表示し、削除ボタンを非表示にします。
  2. テキスト フィールドに入力された値が選択リストでAVAILABLEの場合、追加ボタンを非表示にし、削除ボタンを表示します。
  3. 選択リストが空の場合、追加ボタンを表示し、削除ボタンを非表示にします。

ここに私が思いついたいくつかのコードがあります:

// Remove selected options
$('#removeButton').click(function() {
   //$.map($('#addedchargeamtid :selected'), function(e) {
   $.map($('#addedchargeamtid option'), function(e) {
      var exp = $(e).text();
      // Would like to have all the Option values in CVS format 0.00,1.99, etc...
      // If removed this should also remove the value in the array
   })

   $('#removeButton').hide();
      return !$('#addedchargeamtid :selected').remove();
   });

   // Add charge amount
   $('#addedchargeamtid option:selected').focus(function() {
      $('#removeButton').show();
   });

最初の値を追加すると削除ボタンが表示されますが、値を削除するとボタンが元に戻りません。

アップデート：

さて、私はこれを編集しました。

$('#removeButton').click(function() {
   $('#addedchargeamtid :selected').remove();

   $.map($('#addedchargeamtid option'), function(e) {
      var exp = $(e).text();
      alert(exp); // Need this in CSV format but I think it displays the correct values
   })

   //if($("#addedchargeamtid option").length > 0) {  <-- Didn't work                
   if($("#addedchargeamtid").length > 0) {
      $('#removeButton').show();
   } else {
      $('#removeButton').hide();
   }
});

SELECTに値がない場合でも、ボタンは非表示になりません。オプションも付けてみました。

4

4 に答える 4

0

私の編集が正しいと仮定して、元の質問を大幅に編集しました。問題の解決策は次のとおりです。

XHTML:

<input type="text" id="textField" />
<input type="button" id="addButton" value="Add" />
<input type="button" id="removeButton" value="Remove" />
<select multiple="multiple" id="selectList">
</select>

JavaScript (上記のドキュメント構造を想定):

$(function(){

  $("#textField").keypress(function(){

    var val = $(this).val();

    if (val === '') {
      return;
    }

    // Clear selections
    $("#selectList option").removeAttr("selected");

    // Value not in select list
    if ($("#selectList option").length === 0 || $("#selectList option[value="+val+"]").length === 0) {
      $("#removeButton").hide();
      $("#addButton").show();

    // Value in select list
    } else {
      $("#removeButton").show();
      $("#addButton").hide();

      // Select it
      $("#selectList option[value="+val+"]").attr("selected", "selected");
    }
  });

  $("#removeButton").click(function(){
    var val = $("#textField").val();
    val !== '' && $("selectList option[value="+val+"]").remove();
  });

  $("#addButton").click(function(){
    var val = $("#textField").val();
    val !== '' && $("#selectList").append('<option value="'+val+'" label="'+val+'">'+val+'</option>');
  });

});
于 2009-05-18T22:05:21.303 に答える