2017-02-19 2 views
0

Вот моя Опция: -Можно ли добавить количество предметов в опции выбора в Javascript?

<select id="listboxstock" size="5" class="form-control"> 
 
    <option>Carrot - 3</option> 
 
    <option>Cucumber - 2</option> 
 
</select>

Я хочу, чтобы добавить количество товара, если добавляется тот же элемент. Для примера:

Если добавить еще 1 морковь, выбор должен быть переход от: -

<option>Carrot - 3</option> to be <option>Carrot - 4</option> 

Могу ли я использовать JavaScript для этого? если нет, то как я могу это сделать?

+0

как добавить элементы? –

+0

Для первого вопроса, да, вы можете это сделать, второе - широкое, не показывая, что вы пробовали до сих пор – Icepickle

+0

Google 'javascript изменить текст опции в select' –

ответ

1

Здесь вы

$("#addOption").on("click", function(e){ 
 
    var newOption = $("#optionText").val(); 
 
    var options = {}; 
 
    var index = 0; 
 
    $("#listboxstock option").each(function() { 
 
     debugger; 
 
     var valueComponents = $(this).val().split(" - "); 
 
     if (valueComponents[0] == newOption) { 
 
     var number = parseInt(valueComponents[1]); 
 
     number++; 
 
     $(this).val(valueComponents[0] + " - " + number); 
 
     } 
 
     options["option" + index] = $(this).val(); 
 
     index++; 
 
    }); 
 
    var $el = $("#listboxstock"); 
 
    $el.find('option') 
 
     .remove() 
 
     .end(); 
 
    //console.log($el); 
 
    $.each(options, function(key,value) { 
 
     $el.append($("<option>" + value + "</option>")); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="listboxstock" size="5" class="form-control"> 
 
    <option>Carrot - 3</option> 
 
    <option>Cucumber - 2</option> 
 
</select> 
 
<input type="text" placeholder="Type the name of the item to add" id="optionText" /> 
 
<button id="addOption">Add Option</button>

+0

, что было именно то, что я хочу ... спасибо столько чувак:) –

0

Для этого вы можете использовать множество встроенных функций. Лично я хотел бы использовать раскол и ParseInt создавая следующий код:

<html> 
<body> 
<select size="5"> 
<option onclick="myFucntion()" id="item">Carrot - 3</option> 
<option>Cucumber - 2</option> 
</select> 
<script> 
function myFucntion(){ 
    var str=document.getElementById("item").innerHTML; 
    str=str.split(" "); 
    res=parseInt(str[2]); 
    res++; 
    document.getElementById("item").innerHTML="Carrot - "+res; 
} 
</script> 
</body> 
</html> 

Я не уверен, что я понял, что вы хотели сделать, но я верю, что ты этого хотел.

1

Вы можете использовать replace на textContent выбранных option элемента, используя регулярное выражение для извлечения номера, части, а затем использовать функцию обратного вызова из replace впрыснуть обновленный номер.

Вот демо:

function adjustCount(diff) { 
 
    var sel = document.getElementById('listboxstock'); 
 
    if (sel.selectedIndex < 0) return; // nothing selected 
 
    var opt = sel.options[sel.selectedIndex]; 
 
    opt.textContent = opt.textContent.replace(/\d+/, function (m) { 
 
     return Math.max(0, +m + diff); // adjust, but not below 0 
 
    }); 
 
} 
 

 
document.getElementById('inc').addEventListener('click', adjustCount.bind(null, 1)); 
 
document.getElementById('dec').addEventListener('click', adjustCount.bind(null, -1));
<select id="listboxstock" size="5" class="form-control"> 
 
    <option>Carrot - 3</option> 
 
    <option>Cucumber - 2</option> 
 
</select> 
 
<br> 
 
<button id="inc">Add</button> 
 
<button id="dec">Remove</button>

Смежные вопросы