2015-05-14 3 views
1

Я создаю преобразователь температуры, и у меня возникают проблемы с этим, так как я не могу автоматически изменять вывод при выборе опции.JavaScript [Вариант выбора преобразователя температуры]

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

Надеется, что это имеет смысл:/

Вот 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/

Заранее спасибо :)

+0

я не вижу часть кода, где вы ожидаете этот вариант вывода будет спрятался? что ты уже испробовал? – Jonathan

+0

Привет, я добавил его сейчас, однако это не в javascript. Он написан о ожидаемом выходе. Благодарю. –

+0

Хорошо, позвольте мне [google, что для вас] (https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=hide%20a%20select%20option%20with% 20javascript) – Jonathan

ответ

0

Я создал скрипку с вашей выборки демо преобразования температуры в градусах Цельсия до температуры в Фаренгейта. Для других придерживайтесь тех же процедур.

Ниже 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:

+0

Спасибо, я попробую :) –

Смежные вопросы