0 
<div id="deletePlace">
    <ul>
        <li class="pDeleteul">
            <label>Country</label>
            <select id="dpCountry">
                <option>choose country</option>
                <option>Damascus</option>
                <option>Aleepo</option>
            </select>
        </li>
        <li class="pDeleteul">
            <label>Cell</label>
            <select id="dpCell">
                <option>choose cell</option>
                <option>c1</option>
                <option>c2</option>
            </select>
        </li>
        <li class="pDeleteul">
            <label>Place</label>
            <select id="dpPlace">
                <option>choose place</option>
                <option>p1</option>
                <option>p2</option>
            </select>
            <input type="button" value="delete" onclick="deletePlace()"/>
        </li>
    </ul>
</div>

3 つの選択肢を持つ 3 つのラベルのみです。

削除ボタンを押したときに、ユーザーが選択したオプションのいずれも選択しなかった場合、空の選択の左側にエラー メッセージが表示されます。

すべての選択に残されたエラーメッセージを追加し、jsチェックで選択が空であるかどうかを確認してエラーメッセージを表示させることでそれを行うことができますが、これによりますます重複するコードを書くことになります。JavaScript（またはjQuery）を使用して、そのエラーメッセージを動的に作成し、使用しているように見せる方法はありますか

4

2 に答える 2

3

これを試して ：

$('input[value=delete]').click(function() {
    $('.error').remove();
    $('select').each(function() {
        $this = $(this);
        if ($this[0].selectedIndex === 0) {
            $this.parent().prepend('<span class="error">Error</span>');
        }
    })
});​

各行の機能:

$('input[value=delete]').click(function() {

これにより、ボタンのclickイベントに関数がアタッチされます (属性 equals selectorを使用) - .click()を使用しますdelete

$('.error').remove();

errorすでに存在するエラー ( のクラスを持つ DOM 要素) を削除します- .remove()を使用します

$('select').each(function() {

それぞれで関数を実行しますselect- .each()を使用します

$this = $(this);

$(this)後で使用するために保存- オブジェクトを複数回使用する場合は、(パフォーマンスのために) 「キャッシュ」する方がよい

if ($this[0].selectedIndex === 0) {

選択selectedIndexリストの が0実行される場合

$this.parent().prepend('<span class="error">Error</span>');

.prepend()を使用して、現在の.parent() ( ) にHTML を追加します。liselect

作業例はこちら

于 2012-05-11T13:55:45.160 に答える
-1

これを試してください--> 

$('input[type=button]').on('click', function(e){
        $.each( $('select'), function(){ if( $(this).find('option:selected').val().indexOf('choose') > -1 ) alert('error');    })
于 2012-05-11T13:47:16.057 に答える