时间戳

首页 > 解决方案 > 从下拉列表中获取选定值并将选定值传递到 php 中的提交按钮

javascript - 从下拉列表中获取选定值并将选定值传递到 php 中的提交按钮

问题描述

我有两个从两个不同的数组下拉。

我想从下拉列表中获取/存储选定的值。这样我就可以在提交按钮（href）中传递/发送选定的值

示例：假设用户选择电子邮件为 123 并将中心选择为“培训”，所以我需要在提交按钮中传递两个值，如下所示 - 

<main role="main">
   <div class="row">
      <div class="col-md-12">
         <h4 class="heading-theme  page-header pdt">Create Email Template</h4>
         <span class="border-bottom display-block mb-20"></span>
      </div>
   </div>
   <div class="row mb-3">
      <div class="col-lg-3 col-md-12 mb-1">
         <select class="custom-select" id="status" title="Status">
            <option value="" selected>Select  Template</option>
            <?php
               foreach ($emailTemplate as $row) {
               ?>
            <option value="<?= $row['temp_desc'] ?>"><?= $row['temp_desc'] ?></option>
            <?php
               }
               ?>
         </select>
      </div>
      <div class="col-lg-3 col-md-12 mb-1">
         <select class="custom-select" id="status" title="Status">
            <option value="" selected>Select  Center</option>
            <?php
               foreach ($trainingCenter as $row) {
               ?>
            <option value="<?= $row['organization_name'] ?>"><?= $row['organization_name'] ?></option>
            <?php
               }
               ?>
         </select>
      </div>
      <div class="col-lg-4"></div>
   </div>
   <div>
   <div class="row">
      <div class="col-md-12">
         <div class="mt-2"><a href=" /Mycenter/testmailtemplate/value1/value2" class="text-default btn btn-sm pri-btn pt-2 mr-3 ">
            Submit
            </a>
         </div>
      </div>
   </div>
</main>

标签： javascriptphphtmljquery

解决方案

您可以在某个变量中使用循环获取两个选定的值each，然后拆分这些值，最后将它们添加到href您的标签中。

演示代码：

$("select").on("change", function() {
  var values = "";
  //traverse through all selects
  $(".status").each(function() {
    //separate values using "."
    values += $(this).val() + ".";
  })
  //split values
  var new_values = values.split(".");
  var select_text= $('#status :selected').text();//getting selected text
  $new_href = "/Mycenter/testmailtemplate/" + new_values[0] + "/" + new_values[1]+"/"+ select_text;
  //add value to your href
  $(".pri-btn").attr("href", $new_href)
  console.log($new_href)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main role="main">
  <div class="row">
    <div class="col-md-12">
      <h4 class="heading-theme  page-header pdt">Create Email Template</h4>
      <span class="border-bottom display-block mb-20"></span>
    </div>
  </div>
  <div class="row mb-3">
    <div class="col-lg-3 col-md-12 mb-1">
      <!--added class="status"-->
      <select class="custom-select status" id="status" title="Status">
        <option value="" selected>Select Template</option>
        <option value="1">1th</option>
        <option value="2">2th</option>
        <option value="3">3th</option>
      </select>
    </div>
    <div class="col-lg-3 col-md-12 mb-1">
      <!--added class="status"-->
      <select class="custom-select status" title="Status">
        <option value="" selected>Select Center</option>
        <option value="1">
          1</option>
        <option value="2">
          2</option>
        <option value="3">3
        </option>
      </select>
    </div>
    <div class="col-lg-4"></div>
  </div>
  <div>
    <div class="row">
      <div class="col-md-12">
        <div class="mt-2"><a href=" /Mycenter/testmailtemplate/value1/value2" class="text-default btn btn-sm pri-btn pt-2 mr-3 ">
            Submit
            </a>
        </div>
      </div>
    </div>
</main>

推荐阅读