Question

例如，在下面的代码中，当我选择Ship Date时，我想要＆＃34;排序方向＆＃34;更改为{"Earliest Date First", "Latest Date First"}而不更改选择本身。

当我选择＆＃34; Value＆＃34;时，我想要＆＃34;排序方向＆＃34;在不更改选择的情况下更改为{"Smallest Value First", "Largest Date First"}。

因此，当我在选择框＃1中选择各种特定选项时，我希望在选择框＃2中更改选项的文本。

如何？

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

＆＃13;

$('#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");
});

＆＃13;

<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>

＆＃13;

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');
  } 
});

Answer 2

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

示例：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");
  }
});

Answer 3

您只需在val()表单控件上调用select即可更改所选的选项值。

要更改特定值的文本而不实际更改值，请使用适当的选择器对该特定选项使用text() - aka $('#sort_order option[value="asc"]')

如果您不想更改当前选定的值，只需取出设置sort_order val

的行

$('#sort_by').change(function() {
  if ($('#sort_by').val() == "shipdate") {
    $('#sort_order').val("asc");
    $('#sort_order option[value="asc"]').text("Earliest Date First")
  }
  else {
    $('#sort_order').val("desc");
    $('#sort_order option[value="desc"]').text("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 4

$('#sort_by').change(function() {
    var sort_order = $('#sort_order');
    var sort_order_asc = sort_order.find('option[value="asc"]');
    var sort_order_desc = sort_order.find('option[value="desc"]');
    if ($('#sort_by').val("shipdate")) {
        sort_order_asc.text("Earliest Date First");
        sort_order_desc.text("Latest Date First");
    } else {
        sort_order_asc.text("Asc");
        sort_order_desc.text("Desc");
    }
});

Answer 5

要获取值，请使用

$('selector').val()

要更改值，请使用

$('selector').val("new value")

因此，对于您的代码，它应该是

if ($('#sort_by').val() == "shipdate")
  $('#sort_order').val("asc");
else
  $('#sort_order').val("desc");

请注意，您只需要.val（＆＃34; asc＆＃34;）来设置值

https://jsfiddle.net/c8mb23vg/

Answer 6

您只需要将输入值设置为option的{{1}}，而不是它的标签。它会自动显示相应的标签。

此外，要获取输入的值，只需调用value即可。如果您提供参数，它将设置输入。

所以你正在做的是始终将.val()的值设置为“shipdate”而不是检查它。

但您实际上只是想要更改其他下拉菜单选项的标签 - 选择每个选项并更改#sort_by而不是text。

您还需要更新初始标签以匹配第一个下拉列表的默认选择（即从日期标签开始，因为日期选项是第一个下拉列表）。

val

$('#sort_by').change(function() {
  var $me = $(this), $other = $('#sort_order');
  if ($me.val() == "shipdate") {
    $other.find('option[value="asc"]').text('Earliest Date First');
    $other.find('option[value="desc"]').text('Latest Date First');
  }
  else {
    $other.find('option[value="asc"]').text('Asc');
    $other.find('option[value="desc"]').text('Desc');
  }
});

如何更改选择框内的文本名称而不更改选择？

6 个答案: