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

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

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

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

怎么样？

我的代码做奇怪的事情，并不会更改的选择...

$('#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>

来源

2016-11-03 Dennis

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

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

来源

2016-11-03 14:48:18

为了得到一个值，使用

$('selector').val()

并更改值，使用

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

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

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

请注意，您只需要.VAL（ “ASC”）设定值

https://jsfiddle.net/c8mb23vg/

来源

2016-11-03 14:43:33 Christ

你只需要设置的值输入到option的value，不是它的标签。它会自动显示相应的标签。

另外，到得到输入值，只需拨打.val()。如果你提供了一个参数，它会设置的输入。

所以你在做什么总是将#sort_by的值设置为“shipdate”而不是检查它。

但是你实际上只是在改变其他下拉选项的标签 - 选择每个选项并将其更改为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'); 
 
    } 
 
});

<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">Earliest Date First</option> 
 
    <option value="desc">Latest Date First</option> 
 
    </select> 
 
</form>

来源

2016-11-03 14:43:56 drzaus

哈哈，你打我12秒。 – Christ

对不起，但我的意思是别的......我希望选择“发货日期”时，将“asc”更改为“最早”。（如果选择“值”，则选择“最小”）选项（选项，选项）应该保持不变，只是选项的文本应该改变 – Dennis

@丹尼斯谢谢您的澄清，相应更新 – drzaus

在这里你去，队友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'); 
    } 
});

来源

2016-11-03 14:46:35 Bimbonkens

写的完全一样，除了他可以使用.text而不是.html – lud1977

很好。在声望竞赛中的10个答案，大部分都是一样的:) – Bimbonkens

他们都错了，除了这一个 – lud1977

可以简单地通过在select形式控制调用val()改变所选择的选项值。

要更改某个值的文本，而无需使用正确的选择真正改变对特定选项的值使用text() - 又名$('#sort_order option[value="asc"]')

如果你不想改变当前选择的值，那么只取出设置该sort_orderval

$('#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>

来源

2016-11-03 14:50:36 Adjit

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

线

来源

2016-11-03 14:53:01 lud1977

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

回答

相关问题