Установить параметр по умолчанию в форме

Question

@{ 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> 

Как я могу установить изображение 1, которое будет выбрано по умолчанию, когда я открою страницу, на которой у меня есть 3 разных кнопки, и когда выбрана какая-то кнопка i, я вижу другое изображение? Я хочу, чтобы изображение 1 на моем экране и кнопка 1 были выбраны по умолчанию, но когда я выбираю кнопку 1,2,3, чтобы увидеть другие изображения также

Answer 1

Создать функцию 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> 

Answer 2

Вы можете запустить эту функцию, когда скрипт загружено значением по умолчанию.

function setImage (param) { 
     document.getElementById('ReportParameter').value = param; 
    } 

    setImage(1);