Выпадающие списки выбранного элемента в значение гиперссылки на кнопку HTML

Question

У меня есть раскрывающийся список и кнопка гиперссылки Html. Так что мне нужно, когда я выбираю что-то в раскрывающемся списке, а затем нажимаю кнопку, после чего свойство Количество гиперссылок заполняется значением выбранного элемента раскрывающегося списка.

<div class="form-group col-6 mt-0 mt-lg-3 d-flex align-items-end">
    <select id="drpQuantity">
        <option value="0">--Select --</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <a href="@Url.Action("AddNewItems", "Home",
                new { ItemId = QitemId,
                      Quantity = //I need dropdown lists selected value here})">

        <input type="submit" class="btn btn-primary btn-block rounded-pill" id="@QitemId" value="Add to Cart" />
    </a>
</div>

Answer 1

Как уже говорил @Jasen, параметры @Url.Action() помощника routeValues обрабатываются на стороне сервера перед отправкой в ​​браузер, и вы не можете изменить их напрямую, выбрав значение из элемента <select>.Можно использовать код на стороне клиента, который предоставляет дополнительный параметр строки запроса, используя выбранное значение из элемента <select>, как показано в этом примере:

Пример гиперссылки

<a id="link" href="#">Add New</a>

манипулирование на стороне клиента

$('#drpQuantity').change(function () {
    var selected = $(this).val();

    // use prop function to set href attribute of target anchor link
    $('#link').prop('href', '@Url.Action("AddNewItems", "Home", new { ItemId = QitemId })' + '&Quantity=' + selected);
});

Если вы хотите использовать простой / ванильный JS, вам нужно обработать событие onchange из <select> и установить атрибут href после полученияидентификатор ссылки на якорь / имя тега:

<select id="drpQuantity" onchange="setUrl(this)">...</select>

<script>
function setUrl(element) {
    var value = element.value;

    document.getElementById('link').href = '@Url.Action("AddNewItems", "Home", new { ItemId = QitemId })' + '&Quantity=' + selected;
}
</script>

Ссылка на привязку должна отображаться следующим образом:

<a id="link" href="/Home/AddNewItems?ItemId=1&Quantity=1">Add New</a>

Пример в реальном времени: .NET Fiddle