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

debugcn 发表于 Dev

丹尼斯

例如，在下面的代码中，当我选择时Ship Date，我希望“排序方向”更改为{"Earliest Date First", "Latest Date First"}而不更改选择本身。

当我选择“值”时，我希望“排序方向”更改为{"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>

马廷·卡贾巴迪（Matin Kajabadi）

如果您只想更改选项的文本，则只需更改文本即可。

范例：https : //jsfiddle.net/799cf2wr/

<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" id="asc">Asc</option>
    <option value="desc" id="desc">Desc</option>
  </select>
</form>

JS：

$('#sort_by').change(function() {
  if ($('#sort_by').val() === "shipdate"){
        $('#asc').text("Earliest Date First");
        $('#desc').text("Latest Date First");
  }
  else{
      $('#asc').text("Smallest Value First");
      $('#desc').text("Largest Date First");
  }
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。