Выход текстового поля, который зависит от выбора в выпадающем списке

Question

Мне нужно вывести сумму в текстовое поле независимо от того, какой пользователь выбирает в раскрывающемся меню. У меня есть эти строки кода, но он не меняет ответ. Например, если пользователь выбирает A, тогда ответ будет показан в текстовом поле, если он выбрал B, будет показан другой ответ.

сценарий

$(function(){ 
    $('select[name="Menu"] == A').change(function(){ 
     var textId= $(this).data('text'); 
     $('#'+textId).val("$186.00"); 
    }); 
}); 

$(function(){ 
    $('select[name="Menu"] == B').change(function(){ 
     var textId= $(this).data('text'); 
     $('#'+textId).val("$200.00"); 
    }); 
}); 

HTML

<select name="Menu" data-text="inptxt1"> 
    <option value=""></option> 
    <option value="A">A</option> 
    <option value="B">B</option> 
    <option value="C">C</option> 
    <option value="D">D</option> 
</select> 
</select> 

<input type="text" value="$0.00" name="inptxt1" id="inptxt1" readonly/> 

Answer 1

Чтобы исправить код, который вы хотите слушать change события на SELECT элемент, а не OPTION. Это особенно легко с JQuery, потому что вы можете использовать .val(), чтобы получить выбранное значение, когда оно меняется, как это:

$("select[name='Menu']").change(function() 
{ 
    var selectedValue = $(this).val(); 
    // do stuff with selectedValue (in this case 'A', B', 'C', etc.) 
}); 

Вы обычно хотите, чтобы информацию о ценах, которая может изменяться с течением времени, чтобы быть динамическими и -driven, а не жестко закодирован в условный оператор или разметку.

Прокрутите страницу вниз и нажмите «Запустить сниппет», чтобы увидеть это в действии. Это показывает, как несколько вариантов влияют на стоимость, которая звучит так, как вы в конечном итоге после.

// dynamic product data comes from server (for example, on initial load or via AJAX) 
 
var products = [{ 
 
    Code: 'A', 
 
    Price: 100.00, 
 
    Description: 'Large' 
 
}, { 
 
    Code: 'B', 
 
    Price: 125.00, 
 
    Description: 'X-Large' 
 
}, { 
 
    Code: 'C', 
 
    Price: 150.00, 
 
    Description: 'XX-Large' 
 
}, { 
 
    Code: 'D', 
 
    Price: 1000.00, 
 
    Description: 'WTF-Large' 
 
}]; 
 

 
function RefreshProductInfo() { 
 
    var qty = parseInt($("#ddlQty").val()); 
 
    var productCode = $("#Menu").val(); 
 
    var items = $.grep(products, function(item) { 
 
    return item.Code === productCode; 
 
    }); 
 
    if (items.length === 1) { 
 
    var product = items[0]; 
 
    } else { 
 
    product = { 
 
     Price: 0.0 
 
    }; 
 
    } 
 
    $("#lblPrice").text(product.Price.toFixed(2)); 
 
    var cost = product.Price * qty; 
 
    $("#lblCost").text(cost.toFixed(2)); 
 
} 
 

 
// populate products options 
 
$.each(products, function(idx, item) { 
 
    $("#Menu").append($("<option></option").val(item.Code).text(item.Description)); 
 
}); 
 

 
// populate qty options 
 
var maxQty = 10; 
 
var stringBuffer = []; 
 
for (var i = 0; i < maxQty; i++) { 
 
    stringBuffer[i] = "<option>" + (i + 1) + "</option>"; 
 
} 
 
$("#ddlQty").on("change", RefreshProductInfo).html(stringBuffer.join()); 
 
$("#Menu").on("change", RefreshProductInfo);

* { 
 
    font-family: "Segoe UI", Arial, "Sans serif"; 
 
    font-size: 14px; 
 
} 
 
LABEL { 
 
    display: inline-block; 
 
    width: 100px; 
 
    padding: 4px; 
 
    text-align: right; 
 
} 
 
SPAN { 
 
    color: #333; 
 
    padding: 4px; 
 
    font-weight: bold; 
 
    display: inline-block; 
 
    width: 100px; 
 
    text-align: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 
 
    <label for="Menu">Size:</label> 
 
    <select id="Menu"> 
 
    <option value="">[Choose size]</option> 
 
    </select> 
 
</p> 
 
<p> 
 
    <label for="lblPrice">Unit price:</label> 
 
    $<span id="lblPrice">0.00</span> 
 
</p> 
 
<p> 
 
    <label for="ddlQty">Qty:</label> 
 
    <select id="ddlQty"></select> 
 
</p> 
 
<p> 
 
    <label for="lblCost">Gross cost:</label> 
 
    $<span id="lblCost">0.00</span> 
 
</p>

Answer 2

Я не думаю, что 'select[name="Menu"] == A' является юридическим Селектор JQuery. Я предлагаю сделать селектор, который просто находит выпадающее меню, а затем проверку на значение, которое вы можете сделать в одной функции:

$('select[name="Menu"]').change(function() { 
    var textId = $(this).data('text'); 
    var textValue; 
    if $(this).val() == "A" 
    textValue = "$186.00"; 
    else if $(this).val() == "B" 
    textValue = "$200.00"; 
    end 
    $('#' + textId).val(textValue); 
}); 

Answer 3

Вы должны обнаружить изменения на выбор, а не вариант.

Fiddle

http://jsfiddle.net/ghopkins/o43dnbgh/

Script

$(function(){ 
    $('select[name="Menu"]').change(function(){ 
     var textId= $(this).data('text'); 
     var price = $("option:selected" , this).data('price'); 
     $('#'+textId).val(price); 
    }); 
}); 

HTML

<select name="Menu" data-text="inptxt1"> 
    <option value=""></option> 
    <option value="A" data-price="$186.00">A</option> 
    <option value="B" data-price="$200.00">B</option> 
    <option value="C" data-price="$214.00">C</option> 
    <option value="D" data-price="$228.00">D</option> 
</select> 

<input type="text" value="$0.00" name="inptxt1" id="inptxt1" readonly/> 

Отредактировано, чтобы вернуть атрибуты данных, глупый me ..

Answer 4

Я не думаю, что его необходимо поместить атрибут данных в опции выбора. просто используйте значение для денежного значения и текстовое поле html для текста опции.

Fiddle

<select name="Menu" data-text="inptxt1"> 
    <option value=""></option> 
    <option value="$186.00">A</option> 
    <option value="$200.00">B</option> 
    <option value="$214.00">C</option> 
    <option value="$228.00">D</option> 
</select> 

<input type="text" value="$0.00" name="inptxt1" id="inptxt1" readonly/> 

JavaScript:

$(function(){ 
    $('select[name="Menu"]').change(function(){ 
     var textId= $(this).data('text'); 
     var price = $("option:selected").val(); 
     $('#'+textId).val(price); 
    }); 
});