2017-03-20 18 views
0

+ボタンをクリックすると、さらに選択要素を追加できます。 -ボタンをクリックしたときにも削除する必要があります。 -を1回クリックすると、1つの選択要素が削除されます。どのように私はこのクリック時の選択ボックスを削除

$(function() { 
 
    var p = 2500; 
 
    $('#add').click(function() { 
 
    $("div").append(' Adult: <select><option>1</option><option selected="selected">2</option><option>3</option></select>'); 
 
    $("div").append(' Child: <select><option>0</option><option selected="selected">1</option><option>2</option></select><br>'); 
 
    value = $("#rooms").val(); 
 
    price = $("#price").val(); 
 
    priceInt = parseInt(price); 
 
    value++; 
 
    price = priceInt + p; 
 
    $("#rooms").val(value); 
 
    $('#price').val(price); 
 
    if (value > 0) { 
 
     $('#selectAdult, #selectChild').prop('disabled', false); 
 
    } 
 
    }); 
 
    $('#minus').click(function() { 
 
    value = $("#rooms").val(); 
 
    if (value > 0) { 
 
     price = $("#price").val(); 
 
     priceInt = parseInt(price); 
 
     value--; 
 
     price = priceInt - p; 
 
     $("#rooms").val(value); 
 
     $('#price').val(price); 
 
    } 
 
    if (value == 0) { 
 
     $('#selectAdult, #selectChild').prop('disabled', 'disabled'); 
 
    } 
 
    }); 
 
    var adult = $("#selectAdult option:selected").text(); 
 
    adultInt = parseInt(adult); 
 
    price = $("#price").val(); 
 
    priceInt = parseInt(price); 
 
    if(adultInt == 3){ 
 
    price = priceInt + 400; 
 
    } 
 
    $('#price').val(price); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
    <body> 
 
    <input type = "button" id="minus" value="-"> 
 
    <input type="text" id="rooms" value="1" readonly="readonly"> 
 
    <input type = "button" id="add" value="+"> 
 
    Total: <input type="text" id="price" value="2500" readonly="readonly"> 
 
    <div>Adult: <select id="selectAdult"> 
 
     <option>1</option> 
 
     <option selected="selected">2</option> 
 
     <option>3</option> 
 
    </select> 
 
    Child: <select id="selectChild"> 
 
     <option>0</option> 
 
     <option selected="selected">1</option> 
 
     <option>2</option> 
 
     </select><br></div> 
 
    </body> 
 
</html>

はまた、私は、私は、コードを書かれているが、私はそれはそれはにISN原因どのように行うのではありません推測選択大人が3である場合、合計に400を追加したいんです働いていない。

+0

このように見えるのは、パート2で、パート1はここにあります。http://stackoverflow.com/質問/ 42897935 /どのように選択タグを作るか選択不可能または隠しですか?どれくらい多くの部分があるのだろうか? – Hopeless

+0

ちょうど2.Ya私は厳しい時を過ごしています。 – DragonBorn

+0

私はただ2つの部分があることを知ってうれしいです。最も悪夢的なシナリオは、より多くの取り消し部分を見るために無限のリストをスクロールするときのような、未定義の部分の数です。 – Hopeless

答えて

1

を試すことができます

$(function() { 
 
    var p = 2500; 
 
    $('#add').click(function() { 
 
    $("div").append('<span> Adult: <select><option>1</option><option selected="selected">2</option><option>3</option></select> Child: <select><option>0</option><option selected="selected">1</option><option>2</option></select><br></span>'); 
 
    
 
    value = $("#rooms").val(); 
 
    price = $("#price").val(); 
 
    priceInt = parseInt(price); 
 
    value++; 
 
    price = priceInt + p; 
 
    $("#rooms").val(value); 
 
    $('#price').val(price); 
 
    if (value > 0) { 
 
     $('#selectAdult, #selectChild').prop('disabled', false); 
 
    } 
 
    }); 
 
    $('#minus').click(function() { 
 
    value = $("#rooms").val(); 
 
    if (value > 0) { 
 
     price = $("#price").val(); 
 
     priceInt = parseInt(price); 
 
     value--; 
 
     price = priceInt - p; 
 
     $("#rooms").val(value); 
 
     $('#price').val(price); 
 
     $("div span:last-child").remove(); 
 
    } 
 
    if (value == 0) { 
 
     $('#selectAdult, #selectChild').prop('disabled', 'disabled'); 
 
    } 
 
    }); 
 
    var adult = $("#selectAdult option:selected").text(); 
 
    adultInt = parseInt(adult); 
 
    price = $("#price").val(); 
 
    priceInt = parseInt(price); 
 
    if(adultInt == 3){ 
 
    price = priceInt + 400; 
 
    } 
 
    $('#price').val(price); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <input type = "button" id="minus" value="-"> 
 
    <input type="text" id="rooms" value="1" readonly="readonly"> 
 
    <input type = "button" id="add" value="+"> 
 
    Total: <input type="text" id="price" value="2500" readonly="readonly"> 
 
    <div>Adult: <select id="selectAdult"> 
 
     <option>1</option> 
 
     <option selected="selected">2</option> 
 
     <option>3</option> 
 
    </select> 
 
    Child: <select id="selectChild"> 
 
     <option>0</option> 
 

 

 
     <option selected="selected">1</option> 
 
     <option>2</option> 
 
     </select><br></div> 
 
    </body>

+0

これは動作します。しかし、入力の値が0で、select要素を追加しようとしたとき。 1つではなく2つの選択要素を追加します。それを修正できますか? – DragonBorn

+0

私はそれが1より下に行くことができないその価値によって働かせました – DragonBorn

0

あなたは、私が追加機能の変化あなたappendを持っている(あなたがクラスを使用する必要があります)<span>でそれを包み、マイナス機能で、私はspan最後の子を削除

if (value == 0) { 
    $('#selectAdult, #selectChild').hide(); 
} 
関連する問題