如何将<option>下拉列表中的标签内容传递给服务器

Question

我的表单中有 2 个下拉列表。第一个下拉列表包含 2 个选项，MBA 和 B.Tech。第二个下拉列表将包含与第一个下拉列表中选择的选项相关的主题。这在显示器中工作正常。但是当我将数据发送到服务器时，它会发送value属性的值。我希望它像以前一样工作，即提供与第一选择相关的选项，并将两个下拉菜单的内容发送到服务器。

<div class="form-group">
<label for="formGroupExampleInput">Course</label>
<select name="course" class="form-control course" id="exampleFormControlSelect1">
<option value="1">B.Tech</option>
<option value="2">MBA</option>
</select>
</div>
<div class="form-group">
<label for="formGroupExampleInput">Stream</label>
<select name="stream" class="form-control stream" id="exampleFormControlSelect1">
<option value="1">Electronics and Computer Engineering </option>
<option value="1">Mechatronics Engineering </option>
<option value="1">Civil Engineering </option>
<option value="1">Electronics and Communication Engineering </option>
<option value="1">Mechanical Engineering  </option>
<option value="1">Electrical Engineering </option>
<option value="1">Computer Science and Engineering  </option>
<option value="2">Marketing </option>
<option value="2">Banking and Finance</option>
<option value="2">Pharmaceutical Management </option>
<option value="2">Sales and Retail Marketing </option>
<option value="2">Healthcare Management in collaboration with Fortis Healthcare </option>
<option value="2">Human Resource Management in collaboration with ManpowerGroup </option>
<option value="2">Pharmaceutical Management </option>
<option value="2">Logistics and Supply Chain Management in collaboration with Safeducate </option>
<option value="2">Insurance and Financial Planning </option>
<option value="2">Financial Markets Practice in collaboration with BSE Institute</option>
<option value="2">Health Information Technology in Strategic Partnership with Frost and Sullivan </option>
<option value="2">Sales and Retail Marketing </option>
</select>
</div>

以上是我的 HTML。下面是我用来为我提供与第一个选择相关的选项的 Javascript。

<script>
$(".course").change(function() {
if ($(this).data('options') === undefined) {
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options', $('.stream option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('.stream').html(options);
});
</script>

Answer 1

如果要将选项的文本发送到服务器，请不要使用父下拉选项的分组覆盖value属性。相反，您可以使用data属性进行筛选，如下所示：

$(".course").change(function() {
var $el = $(this);
if (!$el.data('options')) {
$el.data('options', $('.stream option').clone());
}

var id = $el.find('option:selected').data('value');
var $options = $el.data('options').filter('[data-value=' + id + ']');
$('.stream').html($options);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="formGroupExampleInput">Course</label>
<select name="course" class="form-control course" id="exampleFormControlSelect1">
<option data-value="1">B.Tech</option>
<option data-value="2">MBA</option>
</select>
</div>
<div class="form-group">
<label for="formGroupExampleInput">Stream</label>
<select name="stream" class="form-control stream" id="exampleFormControlSelect1">
<option data-value="1">Electronics and Computer Engineering </option>
<option data-value="1">Mechatronics Engineering </option>
<option data-value="1">Civil Engineering </option>
<option data-value="1">Electronics and Communication Engineering </option>
<option data-value="1">Mechanical Engineering </option>
<option data-value="1">Electrical Engineering </option>
<option data-value="1">Computer Science and Engineering </option>
<option data-value="2">Marketing </option>
<option data-value="2">Banking and Finance</option>
<option data-value="2">Pharmaceutical Management </option>
<option data-value="2">Sales and Retail Marketing </option>
<option data-value="2">Healthcare Management in collaboration with Fortis Healthcare </option>
<option data-value="2">Human Resource Management in collaboration with ManpowerGroup </option>
<option data-value="2">Pharmaceutical Management </option>
<option data-value="2">Logistics and Supply Chain Management in collaboration with Safeducate </option>
<option data-value="2">Insurance and Financial Planning </option>
<option data-value="2">Financial Markets Practice in collaboration with BSE Institute</option>
<option data-value="2">Health Information Technology in Strategic Partnership with Frost and Sullivan </option>
<option data-value="2">Sales and Retail Marketing </option>
</select>
</div>

Answer 2

试试这个：

这是一个变通方法，最好有两个单独的下拉列表，将它们都隐藏起来，然后在从第一个下拉列表中选择一个选项时显示相关选项。

$('.course').change(function() {
let id = $(this).val();
$(document).find('.stream option').each(function() {
let value = $(this).val();
let text = $(this).text();
if(id != value) $(this).remove();
$(this).val(text);
});
});

这段代码有什么作用？

很简单，当您从 .course 中选择一个选项时，我们会将值记录在一个名为"id"的变量中，然后我们遍历 .stream 选择中的每个选项，看看它的值是否与我们之前存储在"id"中的值匹配。

如果不匹配，我们将从选择中删除此选项。

最后，我们将其余选项的值设置为选项中的全文。

有什么我应该注意的吗？

如果用户选择了一门课程，然后改变主意并选择了另一门课程，.stream 选择将为空，您可以编写一些代码来解决这个问题，或者我相信其他人会为您提供比我更适合您的答案 - 目前有点匆忙。