Question

我正在创建一个温度转换器，我遇到了麻烦，因为当选择了一个选项时我无法自动更改输出。

我想要的一个例子是用户在文本字段中输入一个数字，然后他们就可以选择当前单位，例如摄氏度。然后他们将选择他们想要输出的单位。但是，我希望如果输入值是摄氏度，那么应该从输出选项选择菜单中删除输出摄氏度值。

希望这是有道理的：/

这是HTML代码。

<body>
  <h3>Convert Temperature</h3>
<table>
        <tbody>
        <tr>
            <td>Enter a value</td>
            <td>
                <input type="text">
                <select id ="to">
                    <option value="far">Farhenheight (F°)</option>
                    <option value="cel">Celsius (C°)</option>
                    <option value="kel">Kelvin (K°)</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>To</td>
            <td>
                <input type="text" readonly>
                <select id="from">
                    <option value="far">Celsius (C°)</option>
                    <option value="cel">Farhenheight (F°)</option>
                    <option value="kel">Kelvin (K°)</option>
                </select>
            </td>
        </tr>
        <tr>

    </tbody>
</table>

这是JSFiddle链接，使事情更清晰。

https://jsfiddle.net/jw6c67vr/4/

提前致谢：）

Answer 1

我用你的样本演示创建了小提琴，将摄氏温度转换为华氏温度。对于其他人，请遵循相同的程序。

以下是js代码：

    $('#txtTemperature').on('change', function () {
        var tempValue = $.trim($(this).val());
        var inputUnit = $.trim($('select#to option:selected').val());
        var outputVal = '';
        if (inputUnit === 'cel') {
            outputVal = cel_faren(parseFloat(tempValue));
        }
        $('#txtResult').val(outputVal);
    });
    $('select#to').on('change', function () {
        var options = $("select#to>option").map(function () {
            return $(this).val();
        }).get();
        var unit = $.trim($('option:selected', this).val());
        var outputUnit = $.trim($('select#from option:selected').val());
        if (unit === outputUnit) {
            if ($.inArray(outputUnit, options) > -1) {
                options.splice($.inArray(outputUnit, options), 1);
            }
            $('select#from').val(options[0]);
        }
    });
    function cel_faren(tempInCel) {
        return (tempInCel * (9 / 5) + 32);
    }

Here is the jsfiddl link:

JavaScript [温度转换器选择选项]

1 个答案: