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

Question

我的表上有两个落地唐斯。第一个下降由两个选项组成，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 select中的每个选项，看看它的值是否与我们以前存储在'id’中的值相匹配。

如果不匹配，则从select中删除此选项。

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

，有什么我应该知道的吗？

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