如何從html中選擇列表框中刪除值點擊

Question

我是Jquery的新手。我無法刪除值3 3 3 &如果我點擊「刪除類別」按鈕，選擇1,1,1。它不刪除，並在某些情況下，它刪除1乘1或2.我無法理解什麼正在發生。我想要的是，我要選擇的每三個值都應該從底部刪除，每個按鈕（刪除類別）上的3到3點擊。

var one = $('.select-manage-category').val(); 
 
var two = $('.select-manage-category1').val(); 
 
var three = $('.select-manage-category2').val(); 
 
$('#add-category').click(function() { 
 
    $(
 
    '.select-manage-category, .select-manage-category1, .select-manage-category2' 
 
).each(function() { 
 
    $('#selected-lst-values').append('<option value="' + $(this).val() + '">' + $(this).val() + '</option>'); 
 
    }); 
 
}); 
 
$('#remove-category').click(function() { 
 
    $('.select-manage-category, .select-manage-category1, .select-manage-category2').each(function() { 
 
    var the_index = $(this).val() - 1; 
 
    $('#selected-lst-values') 
 
     .find('option:nth-last-of-type(' + the_index + ')') 
 
     .remove(); 
 
    }); 
 
});

.select-manage-category, 
 
.select-manage-category1, 
 
.select-manage-category2 { 
 
    width: 100px; 
 
    float: left; 
 
    margin-right: 4px; 
 
} 
 

 
p { 
 
    clear: left; 
 
    text-align: center; 
 
} 
 

 
#selected-lst-values { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div><select class="form-control select-manage-category" size="5"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
</select></div> 
 

 
<div><select class="form-control select-manage-category1" size="5"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
\t \t </select></div> 
 
<div><select class="form-control select-manage-category2" size="5"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
\t \t </select> 
 
</div> 
 
<p class="text-center color-red">You can add up to 20 categories</p> 
 
</div> 
 
<input id="add-category" name="add" type="button" value="Add Category"> 
 
<input id="remove-category" name="add" type="button" value="Remove Category"> 
 
<div><select id="selected-lst-values" class="form-group percent-100" size="5"> 
 
\t \t </select></div> 
 
<button class="btn btn-md btn-radius pi-btn prodetails-btn" type="button"><strong>Save</strong> 
 
    <span class="glyphicon glyphicon-menu-right right-arrow-head-icon"></span> 
 
</button>

Answer 1

由於更換remove函數爲explanation..Please看到更新後的JS小提琴

var one = $('.select-manage-category').val(); 
 
var two = $('.select-manage-category1').val(); 
 
var three = $('.select-manage-category2').val(); 
 
$('#add-category').click(function() { 
 

 
    $(
 
    '.select-manage-category, .select-manage-category1, .select-manage-category2' 
 
).each(function() { 
 
    $('#selected-lst-values').append('<option value="' + $(this).val() + '">' + $(this).val() + '</option>'); 
 
    }); 
 
}); 
 

 
$('#remove-category').click(function(){ 
 
var length=$('#selected-lst-values option').length; //total no of items in the fourth box 
 
//remove the last three on each click 
 
for(var i=0; i<3 ;i++) 
 
{ 
 
$('#selected-lst-values option:eq(' + (length - 1) + ')').remove(); 
 
length --; 
 
} 
 
});

.select-manage-category,.select-manage-category1,.select-manage-category2{ 
 
\t width:100px; 
 
\t float:left; 
 
\t margin-right:4px; 
 
} 
 
p{clear:left;text-align:center;} 
 

 
#selected-lst-values{ 
 
\t width:100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div><select class="form-control select-manage-category" size="5"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
</select></div> 
 
<div><select class="form-control select-manage-category1" size="5"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
\t \t </select></div> 
 
<div><select class="form-control select-manage-category2" size="5"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
\t \t </select> 
 
\t \t </div> 
 
<div> 
 
<p class="text-center color-red">You can add up to 20 categories</p></div> 
 
<input id="add-category" name="add" type="button" value="Add Category"> 
 
<input id="remove-category" name="add" type="button" value="Remove Category"> 
 
<div><select id="selected-lst-values" class="form-group percent-100" size="5"> 
 
\t \t </select></div> 
 
<button class="btn btn-md btn-radius pi-btn prodetails-btn" type="button"><strong>Save</strong> 
 
    <span class="glyphicon glyphicon-menu-right right-arrow-head-icon"></span> 
 
</button>

Updated fiddle

Answer 2

希望這個js會爲你工作。 這個

$('#remove-category').click(function(){ 
 
    var index= $('.select-manage-category')[0].selectedIndex || $('.select-manage-category1')[0].selectedIndex || $('.select-manage-category2')[0].selectedIndex; 
 
    $('.select-manage-category option:eq(' + index + ')').remove(); 
 
    $('.select-manage-category1 option:eq(' + index + ')').remove(); 
 
    $('.select-manage-category2 option:eq(' + index + ')').remove(); 
 
});

.select-manage-category,.select-manage-category1,.select-manage-category2{ 
 
\t width:100px; 
 
\t float:left; 
 
\t margin-right:4px; 
 
} 
 
p{clear:left;text-align:center;} 
 

 
#selected-lst-values{ 
 
\t width:100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div><select class="form-control select-manage-category" size="5"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
</select></div> 
 
<div><select class="form-control select-manage-category1" size="5"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
\t \t </select></div> 
 
<div><select class="form-control select-manage-category2" size="5"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
\t \t </select> 
 
\t \t </div> 
 
<div> 
 
<p class="text-center color-red">You can add up to 20 categories</p></div> 
 
<input id="add-category" name="add" type="button" value="Add Category"> 
 
<input id="remove-category" name="add" type="button" value="Remove Category"> 
 
<div><select id="selected-lst-values" class="form-group percent-100" size="5"> 
 
\t \t </select></div> 
 
<button class="btn btn-md btn-radius pi-btn prodetails-btn" type="button"><strong>Save</strong> 
 
    <span class="glyphicon glyphicon-menu-right right-arrow-head-icon"></span> 
 
</button>

Updated fiddle