下拉列表选定项到 Html 按钮超链接值答案

【问题标题】：Dropdown lists selected item to Html button hyper links value下拉列表选定项到 Html 按钮超链接值
【发布时间】：2019-03-04 17:25:28
【问题描述】：

我有一个下拉列表和 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>

【问题讨论】：

视图已呈现，因此您无法影响 Razor 服务器端代码中的 Quantity 值。您需要在 JavaScript 中重写 href URL 以响应更改值事件。或者，以类似的方式，您将拦截链接点击并在发送到服务器之前插入数量值。

标签： c# html asp.net-mvc

【解决方案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);
});

如果你想使用plain/vanilla JS，你需要处理来自<select>的onchange事件，并在获取锚链接ID/标签名称后设置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

【讨论】：