javascript - 如何在不更改选择的情况下更改选择框中的文本名称？

Question

例如，在下面的代码中，当我选择发货日期时，我希望将“排序方向”更改为{“最早日期优先”，“最新日期优先”} 而不更改选择本身。

当我选择“值”时，我希望“排序方向”更改为 {"Smallest Value First", "Largest Date First"}，而不更改选择。

因此，当我在选择框 #1 中选择各种特定选项时，我希望选择框 #2 中的选项文本发生变化。

如何？

我的代码做了一些奇怪的事情并且没有改变选择...

$('#sort_by').change(function() {
  if ($('#sort_by').val("shipdate"))
    $('#sort_order').val("asc").val("Earliest Date First");
  else
    $('#sort_order').val("desc").val("Latest Date First");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  Sort By Field:
  <select name="sort_by" id="sort_by">
    <option value="shipdate">Ship Date</option>
    <option value="value">Value</option>
  </select>
  <br/>Sort Direction:
  <select name="sort_order" id="sort_order">
    <option value="asc">Asc</option>
    <option value="desc">Desc</option>
  </select>
</form>

Answer 1

给你，伙计https://jsfiddle.net/bimbonkens/no7nqgzg/

您需要更改内部 html，而不是 val()，并且您可以这样做

$('#sort_by').change(function() {
  var asc = $('option[value=asc]', '#sort_order');
  var desc = $('option[value=desc]', '#sort_order');

  if ($(this).val() == 'shipdate') {
    asc.html('Earliest Date First');
    desc.html('Latest Date First');
  } else if($(this).val() == 'value') {
    asc.html('Smallest Value First');
    desc.html('Largest Date First');
  } 
});