Как изменить текстовые названия внутри поля выбора без изменения выбора?

Question

Например, в коде ниже, когда я выбираю Ship Date, я хочу, чтобы «Sort Direction» изменилось на {"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

If вы просто хотите изменить текст своих параметров, чтобы просто изменить текст.

Пример: 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 («ИСС»), чтобы установить значение

https://jsfiddle.net/c8mb23vg/

Answer 3

Вам нужно только установить значение ввода в optionvalue, а не на этикетке. Он автоматически отобразит соответствующую метку.

Также, до введите значение ввода, просто позвоните .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

Вы можете изменить выбранное значение параметра, просто вызвав val() на контроль select формы.

Чтобы изменить текст определенного значения, фактически не изменяя использование значения 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"); 
    } 
});