我有两个下拉从两个不同的数组。
我想从下拉列表中获取/存储所选值。 以便我可以在提交按钮(href)中传递/发送选定值
例如:用户选择电子邮件为123和中心为“培训”,所以我需要传递这两个值在提交按钮如下-
null
<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>
null
您可以在某个变量中使用each
循环来获得两个选定值,然后拆分这些值,最后将它们添加到标记的href
中。
演示代码:
null
$("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>
null
$(".custom-select").on("change", function() {
var value1 = $("#status1").val();
var value2 = $("#status2").val();
var url = '/Mycenter/testmailtemplate/'+value1+'/'+value2;
$(".pri-btn").attr("href", url );
});
<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="status1" title="Status">
<option value="" selected>Select Template</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="col-lg-3 col-md-12 mb-1">
<!--added class="status"-->
<select class="custom-select status" id="status2" 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>