<a>をクリックして選択オプションを変更してください

Question

私はそれを以前見たことがありますが、基本的に私がしようとしているのは、ユーザーが "Missionary Farewell/Homecoming"オプションをクリックして、連絡先フォームの "Missionary Farewell/Homecoming"が既に選択されているドロップダウンメニューを開き、様々な異なる<a>タグとさまざまな選択オプションでそれを行います。

私は

イベントタイプを運ぶクエリ文字列とURLなるようにアンカーのhrefを設定

<form class="contactform" method="post" action="php/events.php"> 
    <input class="leftbox halfbox" name="contactname" placeholder="Contact's Name"> 
    <input class="rightbox halfbox" name="eventname" placeholder="Event Name"> 
    <input class="leftbox halfbox" name="contactphone" placeholder="Contact Phone"> 
    <input class="rightbox halfbox" name="contactemail" placeholder="Contact Email"> 
    <select class="fullbox stubborn" name="eventtype"> 
    <option>What type of event is it?</option> 
    <option value="missionary">Missionary Farewell/Homecoming</option> 
    <option value="highlight">Athletic/Dance Featurette</option> 
    <option value="birthday">Birthday</option> 
    <option value="funeral">Funeral</option> 
    <option value="graduation">Graduation</option> 
    <option value="anniversary">Anniversary</option> 
    <option value="engagement">Engagement</option> 
    <option value="other">Other</option> 
    </select> 
    <textarea class="fullbox" id="textarea" name="otheroption" placeholder="If other, please specify"></textarea> 
    <input class="leftbox halfbox" name="eventloc" placeholder="Event Location"> 
    <input class="rightbox halfbox" name="eventtime" placeholder="Event Duration"> 
    <textarea class="fullbox" id="textarea" name="otherquestions" placeholder="Do you have any other questions/specifications?"></textarea> 
    <input class="fullbox stubborn" id="submit" name="submit" type="submit" value="Submit"> 
</form> 

Answer 1

にリダイレクトしていますHTMLフォーム：フォームページform-page.php JavaScriptを

<a href="form-page.php?eventtype=missionary">...</a> 

は、 URLを読み取り、eventtypeパラメータのクエリ文字列を解析し、それに応じてオプションメニューを設定します。

：あなたはこのような何かを置く </body>終了タグの前 bodyの終わりに続いて

<select class="fullbox stubborn" name="eventtype" id="eventtype"> 

：それを行うために

はのはeventtypeを使用してみましょう、イベントのドロップダウンにidを与える方が良いです

<script> 
    function getParameterByName(name) 
    { 
     var url = window.location.href; 
     name = name.replace(/[\[\]]/g, "\\$&"); 
     var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), 
      results = regex.exec(url); 
     if (!results) return null; 
     if (!results[2]) return ''; 
     return decodeURIComponent(results[2].replace(/\+/g, " ")); 
    } 

    ​document.getElementById('eventtype').value = getParameterByName('eventtype');​​​​​​​​​​ 
</script> 

このアプローチは、ページを管理するためのPHPやサーバーサイドのコードがない純粋なクライアントサイド（純粋なhtml）です。

（もちろん、同じ目標は、Javascriptのオプション事前に選択してフォームページをサーバ側-構築することなく達成することができる）

クレジット：

機能getParameterByName()が来る：How can I get query string values in JavaScript?

ここでは、JavaScriptを使用して選択したオプションを値で変更する方法について説明します。 HTML SELECT - Change selected option by VALUE using JavaScript