如何更改選擇框內的文本名稱而不更改選擇？

Question

例如，在下面的代碼中，當我選擇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>

Answer 1

如果您只需要更改您需要的選項文本，只需更改文本即可。

實施例：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 2

爲了得到一個值，使用

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

Answer 3

你只需要設置的值輸入到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>

Answer 4

在這裏你去，隊友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 5

可以簡單地通過在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>

Answer 6

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

線