我有一个带有选项的下拉框,一旦选择将更改下一个下拉框的值。
- 如果我选择第一个培训选项,两个日期都会通过表格发送到我的电子邮件地址。
- 但是,如果我选择社交媒体研讨会或以下任何一个,则日期为 9 月 2 日或 18 日,这是第一个选项的值,而不是我为这个特定标签设置的值。
我称之为 <body onload="setup()">
Javascript:
function setup(){
var select1 = document.getElementById('searchType');
var selects = document.getElementsByTagName('select');
for (i = 0; i < selects.length; i++)
{
if (selects[i].id != this.id) {
selects[i].style.display = 'none';
}
document.getElementById(select2).style.display = 'block';
document.getElementById('textAreaSearchBox').style.display = 'block';
};
}
CSS:
#socialmedia, #advancedmarketing, #textAreaSearchBox, #firstaid {
display: none;}
HTML:
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<label for="phone">What kind of training?</label>
<select id="searchType" name="training" class="fixed-size-drop">
<option value="intromarketing">Introduction to Marketing</option>
<option value="socialmedia">Social Media Workshop</option>
<option value="advancedmarketing">Advanced Marketing Workshop</option>
<option value="firstaid">First Aid Training</option></select>
<label for="date">Choose your Date:</label>
<select id="intromarketing" name="date" class="fixed-size-drop2">
<option value="2ndsept" name="2ndsept">2nd sept 2014</option>
<option value="18thsept" name="18thsept">18th sept 2014</option></select>
<select id="socialmedia" class="fixed-size-drop2">
<option value="id">11th sept 2014</option>
<option value="18thsept">18th sept 2014</option></select>
<select id="advancedmarketing" class="fixed-size-drop2">
<option value="name">9th sept 2014</option>
<option value="organization">25th sept 2014</option></select>
<select id="firstaid" class="fixed-size-drop2">
<option value="3rdsept" name="3rdsept">3rd September 2014</option>
<option value="16thsept" name="16thsept">16th September 2014</option></select>
<input type="submit" class="ubutton" value="submit">
</form>
这是上传的表格:http://coffeemachines4u.co.uk/test-form.php
我已经摸不着头脑几个小时了,所以如果有人能指出我正确的方向,我将非常感激 :)
最佳答案
这是因为您的选择框的名称属性。只有第一个选择具有名称日期。如果这是不可见的,它也在那里,因此表单从日期发送日期参数。您可以同时更改 name 属性和 selectboxes 的 vivible
使用这个 JavaScrip
var select1 = document.getElementById('searchType');
var selects = document.getElementsByTagName('select');
select1.onchange = function() {
var select2 = this.value.toLowerCase();
for (i = 0; i < selects.length; i++) {
if (selects[i].id != this.id) {
selects[i].style.display = 'none';
selects[i].removeAttribute('name');
}
}
document.getElementById(select2).style.display = 'block';
document.getElementById(select2).name = 'date';
document.getElementById('textAreaSearchBox').style.display = 'block';
关于javascript - 我的级联组合框发送了错误的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25326096/