在表单中设置默认参数

Set default parameter in form

本文关键字：默认 参数 设置 表单      更新时间：2023-09-26
@{  List<System.Web.Mvc.SelectListItem> Month = new List<System.Web.Mvc.SelectListItem>();
}
<script type="text/javascript">

    function setImage(param) {
        document.getElementById('ReportParameter').value = param;
//        alert(document.getElementById('ReportParameter').value);
    }
</script>
<form id="reportParametersForm" method="GET" action="@string.Format("{0}/{1}", @Url.Content("~/Reports/View"), ViewBag.Report)">
<fieldset style="padding: 0.2em 0 1.2em 0; height: 50px">
    <legend style="margin: 0 1px 0 10px; padding: 3px 36px 3px 20px; background-color: #494949;
        color: white; font-size: 11pt;">
        @Html.Resource(String.Format("Report_{0}", ViewBag.Report as string))</legend>
    <table border="0" cellspacing="0" cellpadding="0" style="font-size: x-small">
       <input type="hidden" name="ReportParameter" id="ReportParameter" value=""/>
    </table>
    <div align="center">   
        <button class="button" id="Day" style="width:90px; height:46px" type="submit" onclick="setImage('1') ;">
            Day</button>
         <button class="button" id="Week" style="width:90px; height:46px" type="submit" onclick="setImage('2') ;">
            Week</button>
         <button class="button" id="Month" style="width:90px; height:46px" type="submit" onclick="setImage('3') ;">
            Month</button>           
    </div>
    <input type="hidden" name="ShowToolBar" value="false" />
</fieldset>
</form>
<script type="text/javascript">
    var links = $('button');
    links.click(function () {
        links.css('background-color', '#2B2B2B');
        $(this).css('background-color', '#BE4856');
    });
</script>
当我

打开有 3 个不同按钮的页面并且当我选择某些按钮时，如何将图像 1 设置为默认图像，当我选择某些按钮时，我会看到不同的图像？我想在屏幕上看到图像 1，并且按钮 1 被选为默认值，但是当我选择按钮 1，2，3 以便能够看到其他图像时

创建函数 setDefaults（），并在启动时调用它要使代码更清晰，您可以将 html 中相关图像的数据属性传递给每个按钮。

         <button class="button" id="Day" style="width:90px; height:46px" type="submit" data-image="1">
            Day</button>
         <button class="button" id="Week" style="width:90px; height:46px" type="submit" data-image="2">
            Week</button>
         <button class="button" id="Month" style="width:90px; height:46px" type="submit" data-image="3">
            Month</button>

和帮助程序函数setActiveButton（）来改变样式。

function setDefaults(buttonId) {
  var button = $('#' + buttonId);
  setActiveButton(buttonId);
  setImage(button.data('image'));
}
function setActiveButton(buttonId) {
  var links = $('button');
  links.css('background-color', '#2B2B2B');
  $('#' + buttonId).css('background-color', '#BE4856');
}

在您的脚本标签中

<script type="text/javascript">
    var links = $('button');
    links.click(function () {
        setActiveButton(this.id);
    });
    setDefaults('Day');
</script>

您可以在使用默认值加载脚本时运行该函数。 

    function setImage (param) {
        document.getElementById('ReportParameter').value = param;
    }
    setImage(1);
相关文章：