jqueryプロセスの付加値はajax

Question

です。コールバックと非同期のajaxの動作については読んだことがありますが、ajaxから追加された値からイベントを作成する方法を理解できません。

私はこのHTMLを持っている：

var searchRequest = null; 
 
$(function() { 
 
    $(':input[type="submit"]').prop('disabled', true); 
 
    var minlength = 5; 
 
    $("#cp").keyup(function() { 
 
    var that = this, 
 
     value = $(this).val().trim();; 
 
    value = value.replace(/\s/g, ''); 
 

 
    if (value.length == minlength) { 
 
     if (searchRequest != null) 
 
     searchRequest.abort(); 
 
     searchRequest = $.ajax({ 
 
     type: "POST", 
 
     url: "post_job_ville.php", 
 
     data: { 
 
      'searchterm': value 
 
     }, 
 
     dataType: "text", 
 
     success: function(msg) { 
 
      $("#ville").append(msg); 
 
     } 
 
     }); 
 
    } 
 
    }); 
 
}); 
 

 

 
// Code to remove the disabled state of submit button 
 
if ($('#ville').val()) { 
 
    $(':input[type="submit"]').prop('disabled', false); 
 
    $(':input[type="submit"]').toggleClass('btn-custom btn-primary'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <input name="cp" id="cp" class="form-control"> 
 
</div> 
 
<div class="form-group"> 
 
    <select class="form-control" id="ville"> 
 
\t <option selected="selected" value="">Select a value</option> 
 
\t </select> 
 
</div> 
 
<input type="submit" id="btn-login" class="btn btn-custom btn-lg btn-block" value="Submit">

私のAJAX呼び出しが正常に動作しています。誰かが入力フィールド（#cp）で5 caractersを入力すると、それは、AJAX呼び出しをトリガし、選択メニュー（#ville）に

<option value="x">...</option> 

を追加します。

問題は、値を持つオプションと呼ばれるajaxが選択されている場合、送信ボタンの無効状態を削除することです。だから、私はJSの最後にコードを書いたが、ajaxは非同期なので、そのようには動作しない。私はajax呼び出しの成功部分にコードを入れようとしましたが、うまくいきませんでした。

誰かが進める方法について考えているなら、本当に感謝します。

ありがとうございました！

Answer 1

あなたはこのようなあなたの選択にイベントを配置しようとすることができます：jQueryのセレクタから

$('#ville').on('change', function(e) { 
    if (e.target.value) { 
    $(':input[type="submit"]').prop('disabled', false); 
    /* other stuffs... */ 
    } else { 
    $(':input[type="submit"]').prop('disabled', true); 
    /* other stuffs... */ 
    } 
}) 

「の（）」メソッドを使用すると、選択した要素の上にお好みのイベントを配置することができます。 ここでは、 'change'イベントを配置して、入力値 'change'のときに関数をコールバックします。 選択した値が空でない（選択した項目の最初の項目のように）かどうかを確認するだけで完了です。

またはそのような何か：

$('#ville').on('change', function(e) { 
    const value = e.target.value 
    $(':input[type="submit"]').prop('disabled', !value); 
    /* other stuffs... */ 
})