Webページを開くために選択したドロップダウンアイテムにリンクする方法

Question

都市とソーシャルネットワーキングフィルタを持つフォームを作成しようとしています。私は都市とソーシャルネットワーキングの両方の価値を捉えたいと思っています。値を保存したいのですが、私のフォームを送信ボタンでソーシャルネットワーキングサイトにリダイレクトしたいと思います。私がFacebookを選択した場合、私はFacebookのホームページを送信ボタンで開くことを望みます。私のページはリダイレクトされていません。ここでの問題は、あなたが選択フィールドからあなたの価値を処理する方法である、

<script type="text/javascript"> 
 
function actionDef() { 
 
var option_selected = $('purposeId').value(); 
 
console.log = option_selected; 
 
    if(option_selected=="gl") { 
 
     document.getElementById("search-form").action = "https://www.google.co.in/"; 
 
    } 
 
    else if(option_selected=="y") { 
 
     document.getElementById("search-form").action = "https://in.yahoo.com/?p=us"; 
 
    } 
 
    else if(option_selected=="fb") { 
 
     document.getElementById("search-form").action = "http://www.facebook.com/"; 
 
    } 
 
}  
 
</script>

 <form action="/" name="search-form" id="search-form" method="get" accept-charset="UTF-8" class="form-vertical"> 
 
<div class="city"> 
 
       <label for="cityId" class="required">Enter your city</label> 
 
       <select id="cityId" name="cityId" data-prefill="location.cityId" class="form-control" placeholder="Enter a city"> 
 
        <option value="9">Bangalore</option> 
 
        <option value="20">Chennai</option> 
 
        <option value="27">Faridabad</option> 
 
        <option value="28">Ghaziabad</option> 
 
        <option value="32">Gurgaon</option> 
 
        <option value="36">Howrah</option> 
 
        <option value="38">Hyderabad</option> 
 
        <option value="49">Kolkata</option> 
 
        <option value="57">Mumbai</option> 
 
        <option value="61">Navi Mumbai</option> 
 
        <option value="63" selected="selected">New Delhi</option> 
 
        <option value="89">Noida</option> 
 
        <option value="70">Pune</option> 
 
        <option value="76">Secunderabad</option> 
 
        <option value="79">Thane</option> 
 
        <option value="92">Agra</option> 
 
        <option value="1">Ahmedabad</option> 
 
        <option value="208">Ahmednagar</option> 
 
        <option value="93">Ajmer</option> 
 
        <option value="2">Akola</option> 
 
        <option value="295">Alappuzha</option> 
 
        <option value="209">Aligarh</option> 
 
        <option value="3">Allahabad</option> 
 
        <option value="140">Alleppey</option> 
 
        <option value="294">Aluva</option> 
 
        <option value="4">Alwar</option> 
 
        <option value="94">Ambala</option> 
 
        <option value="141">Amravati</option> 
 
        <option value="5">Amritsar</option> 
 
        <option value="6">Anand</option> 
 
        <option value="112">Anantapur</option> 
 
        <option value="255">Anantnag</option> 
 
        <option value="7">Ankleshwar</option> 
 
        <option value="210">Arakkonam</option> 
 
        <option value="256">Asansol</option> 
 
        <option value="8">Aurangabad</option> 
 
        <option value="297">Avadi</option> 
 
        <option value="211">Baddi</option> 
 
        <option value="302">Bagalkot</option> 
 
        <option value="9">Bangalore</option> 
 
        <option value="142">Bardoli</option> 
 
        <option value="10">Bareilly</option> 
 
        <option value="212">Barkathpura</option> 
 
        <option value="11">Baroda</option> 
 
        <option value="213">Batala</option> 
 
        <option value="214">Beawar</option> 
 
        <option value="12">Belgaum</option> 
 
        <option value="113">Bellary</option> 
 
        <option value="267">Berhampur</option> 
 
        <option value="13">Bharuch</option> 
 
        <option value="91">Bhatinda</option> 
 
        <option value="143">Bhavnagar</option> 
 
        <option value="257">Bhilai</option> 
 
        <option value="17">Bhilwara</option> 
 
        <option value="215">Bhimavaram</option> 
 
        <option value="144">Bhiwandi</option> 
 
        <option value="14">Bhopal</option> 
 
        <option value="15">Bhubaneshwar</option> 
 
        <option value="145">Bhuj</option> 
 
        <option value="288">Bidar</option> 
 
        <option value="301">Bijapur</option> 
 
        <option value="16">Bikaner</option> 
 
        <option value="216">Bilaspur</option> 
 
        <option value="146">Boisar</option> 
 
        <option value="258">Bokaro</option> 
 
        <option value="18">Calicut</option> 
 
        <option value="19">Chandigarh</option> 
 
        <option value="217">Chandrapur</option> 
 
        <option value="147">Changanacherry</option> 
 
        <option value="275">Chankheda</option> 
 
        <option value="20">Chennai</option> 
 
        <option value="96">Chidambaram</option> 
 
        <option value="290">Chitradurga</option> 
 
        <option value="300">Chokodi</option> 
 
        <option value="21">Cochin</option> 
 
        <option value="22">Coimbatore</option> 
 
        <option value="148">Cuddalore</option> 
 
        <option value="23">Cuttack</option> 
 
        <option value="149">Dahanu</option> 
 
        <option value="150">Dahej</option> 
 
        <option value="151">Daman</option> 
 
        <option value="273">Dausa</option> 
 
        <option value="152">Davangere</option> 
 
        <option value="105">Dehradun</option> 
 
        <option value="24">Delhi</option> 
 
        <option value="218">Derabassi</option> 
 
        <option value="25">Dewas</option> 
 
        <option value="95">Dhanbad</option> 
 
        <option value="97">Dharwad</option> 
 
        <option value="26">Dhule</option> 
 
        <option value="219">Dindigul</option> 
 
        <option value="220">Durg</option> 
 
        <option value="153">Durgapur</option> 
 
        <option value="98">Eluru</option> 
 
        <option value="106">Ernakulam</option> 
 
        <option value="99">Erode</option> 
 
        <option value="221">Faizabad</option> 
 
        <option value="27">Faridabad</option> 
 
        <option value="222">Firozabad</option> 
 
        <option value="154">Gandhidham</option> 
 
        <option value="253">Gandhinagar</option> 
 
        <option value="107">Gangtok</option> 
 
        <option value="28">Ghaziabad</option> 
 
        <option value="29">Goa</option> 
 
        <option value="299">Gokak</option> 
 
        <option value="259">Gorakhpur</option> 
 
        <option value="30">Gulbarga</option> 
 
        <option value="31">Guntur</option> 
 
        <option value="32">Gurgaon</option> 
 
        <option value="114">Guwahati</option> 
 
        <option value="33">Gwalior</option> 
 
        <option value="108">Haldwani</option> 
 
        <option value="223">Hapur</option> 
 
        <option value="155">Haridwar</option> 
 
        <option value="289">Harpanahalli</option> 
 
        <option value="129">Hassan</option> 
 
        <option value="287">Haveri</option> 
 
        <option value="264">Hazirabagh</option> 
 
        <option value="34">Himmatnagar</option> 
 
        <option value="109">Hissar</option> 
 
        <option value="156">Hoshiarpur</option> 
 
        <option value="157">Hospet</option> 
 
        <option value="35">Hosur</option> 
 
        <option value="36">Howrah</option> 
 
        <option value="37">Hubli</option> 
 
        <option value="38">Hyderabad</option> 
 
        <option value="293">Idukki</option> 
 
        <option value="39">Indore</option> 
 
        <option value="40">Jabalpur</option> 
 
        <option value="41">Jaipur</option> 
 
        <option value="45">Jalandhar</option> 
 
        <option value="131">Jalgaon</option> 
 
        <option value="224">Jalna</option> 
 
        <option value="260">Jammu</option> 
 
        <option value="42">Jamnagar</option> 
 
        <option value="43">Jamshedpur</option> 
 
        <option value="225">Jhansi</option> 
 
        <option value="44">Jodhpur</option> 
 
        <option value="46">Junagadh</option> 
 
        <option value="284">Kadappa</option> 
 
        <option value="110">Kakinada</option> 
 
        <option value="158">Kalka</option> 
 
        <option value="279">Kallakurichi</option> 
 
        <option value="159">Kalyan</option> 
 
        <option value="160">Kancheepuran</option> 
 
        <option value="100">Kankroli</option> 
 
        <option value="161">Kannur</option> 
 
        <option value="47">Kanpur</option> 
 
        <option value="132">Kanyakumari</option> 
 
        <option value="162">Kapurthala</option> 
 
        <option value="163">Karad</option> 
 
        <option value="164">Karaikudi</option> 
 
        <option value="226">Karimnagar</option> 
 
        <option value="111">Karnal</option> 
 
        <option value="165">Karur</option> 
 
        <option value="286">Karwar</option> 
 
        <option value="283">Kasaragode</option> 
 
        <option value="227">Katni</option> 
 
        <option value="228">Khammam</option> 
 
        <option value="266">Khandwa</option> 
 
        <option value="166">Khanna</option> 
 
        <option value="265">Khargone</option> 
 
        <option value="305">Kolar</option> 
 
        <option value="48">Kolhapur</option> 
 
        <option value="49">Kolkata</option> 
 
        <option value="167">Kollam</option> 
 
        <option value="50">Kota</option> 
 
        <option value="90">Kottayam</option> 
 
        <option value="168">Kovilatti</option> 
 
        <option value="115">Kozhikode</option> 
 
        <option value="169">Kumbakonam</option> 
 
        <option value="116">Kurnool</option> 
 
        <option value="170">Kurukshetra</option> 
 
        <option value="136">Lathur</option> 
 
        <option value="51">Lucknow</option> 
 
        <option value="52">Ludhiana</option> 
 
        <option value="53">Madurai</option> 
 
        <option value="254">Mahabubnagar</option> 
 
        <option value="54">Mahad</option> 
 
        <option value="278">Malappuram</option> 
 
        <option value="282">Mandya</option> 
 
        <option value="55">Mangalore</option> 
 
        <option value="139">Mangan</option> 
 
        <option value="101">Manipal</option> 
 
        <option value="171">Manjeri</option> 
 
        <option value="130">Mansarovar</option> 
 
        <option value="172">Mapusa</option> 
 
        <option value="229">Mathura</option> 
 
        <option value="292">Mavelikara</option> 
 
        <option value="173">Meerut</option> 
 
        <option value="56">Mehsana</option> 
 
        <option value="174">Moga</option> 
 
        <option value="137">Mohali</option> 
 
        <option value="175">Morvi</option> 
 
        <option value="298">Mudhol</option> 
 
        <option value="57">Mumbai</option> 
 
        <option value="58">Mysore</option> 
 
        <option value="176">Nabha</option> 
 
        <option value="177">Nadiad</option> 
 
        <option value="117">Nagercoil</option> 
 
        <option value="59">Nagpur</option> 
 
        <option value="230">Nanded</option> 
 
        <option value="231">Nandyal</option> 
 
        <option value="277">Narsipatnam</option> 
 
        <option value="60">Nashik</option> 
 
        <option value="61">Navi Mumbai</option> 
 
        <option value="178">Navsari</option> 
 
        <option value="304">Neelamangala</option> 
 
        <option value="62">Nellore</option> 
 
        <option value="63">New Delhi</option> 
 
        <option value="232">Nizamabad</option> 
 
        <option value="89">Noida</option> 
 
        <option value="274">Nokha</option> 
 
        <option value="233">Ongole</option> 
 
        <option value="179">Palakkad</option> 
 
        <option value="261">Palanpur</option> 
 
        <option value="268">Palghar</option> 
 
        <option value="234">Pali</option> 
 
        <option value="138">Panchkulla</option> 
 
        <option value="180">Panipat</option> 
 
        <option value="181">Panjim</option> 
 
        <option value="64">Panvel</option> 
 
        <option value="235">Parbhani</option> 
 
        <option value="182">Patalganga</option> 
 
        <option value="183">Pathanamthitta</option> 
 
        <option value="236">Pathankot</option> 
 
        <option value="65">Patiala</option> 
 
        <option value="66">Patna</option> 
 
        <option value="67">Pen</option> 
 
        <option value="184">Phagwara</option> 
 
        <option value="68">Pithampur</option> 
 
        <option value="185">Pollachi</option> 
 
        <option value="186">Ponda</option> 
 
        <option value="102">Pondichery</option> 
 
        <option value="69">Porbunder</option> 
 
        <option value="296">Poruru</option> 
 
        <option value="187">Porvorim</option> 
 
        <option value="188">Pudukottai</option> 
 
        <option value="70">Pune</option> 
 
        <option value="237">Raichur</option> 
 
        <option value="238">Raigarh</option> 
 
        <option value="71">Raipur</option> 
 
        <option value="72">Rajkot</option> 
 
        <option value="73">Rajmundry</option> 
 
        <option value="239">Rajnandgaon</option> 
 
        <option value="189">Rajpura</option> 
 
        <option value="74">Ranchi</option> 
 
        <option value="240">Ranipet</option> 
 
        <option value="75">Ratlam</option> 
 
        <option value="133">Ratnagiri</option> 
 
        <option value="190">Rewari</option> 
 
        <option value="241">Rohtak</option> 
 
        <option value="191">Ropar</option> 
 
        <option value="118">Rourkela</option> 
 
        <option value="192">Rudrapur</option> 
 
        <option value="242">Saharanpur</option> 
 
        <option value="103">Salem</option> 
 
        <option value="285">Sangareddy</option> 
 
        <option value="134">Sangli</option> 
 
        <option value="193">Sangrur</option> 
 
        <option value="135">Satara</option> 
 
        <option value="76">Secunderabad</option> 
 
        <option value="119">Shimla</option> 
 
        <option value="243">Shimoga</option> 
 
        <option value="262">Sikar</option> 
 
        <option value="120">Silchar</option> 
 
        <option value="121">Siliguri</option> 
 
        <option value="77">Silvassa</option> 
 
        <option value="244">Sirsa</option> 
 
        <option value="245">Sitapur</option> 
 
        <option value="194">Sivakasi</option> 
 
        <option value="195">Sohana</option> 
 
        <option value="246">Solan</option> 
 
        <option value="196">Solapur</option> 
 
        <option value="197">Sonepat</option> 
 
        <option value="247">Sri Ganganagar</option> 
 
        <option value="248">Srikakulam</option> 
 
        <option value="263">Srinagar</option> 
 
        <option value="78">Surat</option> 
 
        <option value="269">Swargate</option> 
 
        <option value="249">Tadepalligudem</option> 
 
        <!--<option value="250">Tamilnadu</option> --> 
 
        <option value="122">Tanjore</option> 
 
        <option value="79">Thane</option> 
 
        <option value="198">Thanjavur</option> 
 
        <option value="281">Theni</option> 
 
        <option value="123">Thiruvananthapuram</option> 
 
        <option value="280">Thiruvannamalai</option> 
 
        <option value="291">Thripunithura</option> 
 
        <option value="124">Thrissur</option> 
 
        <option value="125">Tirunelveli</option> 
 
        <option value="126">Tirupathi</option> 
 
        <option value="251">Tirupur</option> 
 
        <option value="199">Tiruvalla</option> 
 
        <option value="272">Tonk</option> 
 
        <option value="104">Trichur</option> 
 
        <option value="80">Trichy</option> 
 
        <option value="81">Trivandrum</option> 
 
        <option value="200">Tumkur</option> 
 
        <option value="82">Udaipur</option> 
 
        <option value="201">Udupi</option> 
 
        <option value="83">Ujjain</option> 
 
        <option value="202">Unjha</option> 
 
        <option value="84">Valsad</option> 
 
        <option value="85">Vapi</option> 
 
        <option value="86">Varanasi</option> 
 
        <option value="276">Vastral</option> 
 
        <option value="127">Vellore</option> 
 
        <option value="203">Veraval</option> 
 
        <option value="87">Vijayawada</option> 
 
        <option value="204">Villupuram</option> 
 
        <option value="205">Virudhachalam</option> 
 
        <option value="206">Virudhunagar</option> 
 
        <option value="88">Vizag</option> 
 
        <option value="128">Warangal</option> 
 
        <option value="271">Wardha</option> 
 
        <option value="252">Yamunanagar</option> 
 
        <option value="270">Yavatmal</option> 
 
        <option value="303">Yelanka</option> 
 
        <option value="207">Zirakpur</option> 
 
       </select> 
 
       <span id="city-not-selected-error" class="help-inline"> </span> <i class="fa fa-angle-down" aria-hidden="true"></i> 
 
       </div> 
 

 
     <div class="purpose"> 
 
       <label for="purposeId" class="required">Enter Type</label> 
 
        <select id="purposeId" name="purposeId" class="form-control" placeholder="Selelct Type" onChange="actionDef()"> 
 
        <option value="select_purpose" selected="selected">Selelct Type</option> 
 
        <option value="1" id="gl">Google</option> 
 
        <option value="2" id="y">Yahoo</option> 
 
        <option value="3" id="fb">Facebook</option> 
 
       </select> 
 
       
 
<span id="city-not-selected-error" class="help-inline"> </span> <i class="fa fa-angle-down" aria-hidden="true"></i> <span id="purpose-not-selected-error" class="help-inline"> </span> 
 
</div> 
 
        
 
       <div class="show-ofr"> 
 
       <input type="submit" name="button" class="btn btn-primary btn-block"> 
 
       </div> 
 
</form>

Answer 1

は、以下のコードを試してみてください私のコードです。

はJavaScript

<script src="http://code.jquery.com/jquery-3.0.0.min.js"></script> 
    <script> 
     jQuery(function($) { 
     // bind change event to select 
     $('#purposeId').on('change', function() { 
      var url = $(this).val(); // get selected value 
      alert(url); 
      if (url == "1") { 
      document.getElementById("search-form").action = "https://www.google.co.in/"; 
      } else if (url == "2") { 
      document.getElementById("search-form").action = "https://in.yahoo.com/?p=us"; 
      } else if (url == "3") { 
      document.getElementById("search-form").action = "http://www.facebook.com/"; 
      } 
     }); 
     }); 
    </script> 

HTML

<form action="" name="search-form" id="search-form" method="get" accept-charset="UTF-8" class="form-vertical"> 
     <div class="city"> 
     <label for="cityId" class="required">Enter your city</label> 
     <select id="cityId" name="cityId" data-prefill="location.cityId" class="form-control" placeholder="Enter a city"> 
      <option value="88">Vizag</option> 
      <option value="128">Warangal</option> 
      <option value="271">Wardha</option> 
      <option value="252">Yamunanagar</option> 
      <option value="270">Yavatmal</option> 
      <option value="303">Yelanka</option> 
      <option value="207">Zirakpur</option> 
     </select> 
     <span id="city-not-selected-error" class="help-inline"></span> 
     <i class="fa fa-angle-down" aria-hidden="true"></i> 
     </div> 
     <div class="purpose"> 
     <label for="purposeId" class="required">Enter Type</label> 
     <select id="purposeId" name="purposeId" class="form-control" placeholder="Selelct Type"> 
      <option value="select_purpose" selected="selected">Selelct Type</option> 
      <option value="1" id="gl">Google</option> 
      <option value="2" id="y">Yahoo</option> 
      <option value="3" id="fb">Facebook</option> 
     </select> 
     <span id="city-not-selected-error" class="help-inline"> </span> <i class="fa fa-angle-down" aria-hidden="true"></i> <span id="purpose-not-selected-error" class="help-inline"> </span> 
     </div> 
     <div class="show-ofr"> 
     <input type="submit" name="button" class="btn btn-primary btn-block"> 
     </div> 
    </form>