Question

我正在尝试使用HTML和JavaScript以及使用下拉列表来制作表单。所以我一遍又一遍地搜索，我发现了类似的问题，但是不能从答案中解决任何问题。所以，我想通过下拉菜单选择我的表格，所以我可以像“公里”一样将其转换为“里程”或“英尺”，取决于我选择的内容。我得到它为Temparature形式工作，但只有从Celsius到Farenhait的转换，到其他方式不起作用，我不知道为什么。这是HTML代码：

<body onload="startTime()">
    <p>Temparature</p>
    <br />
    <form>
        <input id="c" name="c" onkeyup="preveri()">
        <select id="chose1">
            <option></option>
            <option value="C">Celzija</option>
            <option value="F">Farenhait</option>
        </select>
        <br />equals
        <br />
        <input id="f" name="f" onkeyup="preveri()">
        <select id="chose2">
            <option></option>
            <option value="C">Celzija</option>
            <option value="F">Farenhait</option>
        </select>
    </form>
    <br />
    <p>Lenght</p>
    <form>
        <input id="k" name="k" onkeyup="preveri1()">
        <select id="chose2">
            <option></option>
            <option value="K">Kilometer</option>
            <option value="M">Miles</option>
        </select>
        <br />equals
        <br />
        <input id="m" name="m" onkeyup="preveri1()">
        <select id="chose2">
            <option></option>
            <option value="K">Kilometer</option>
            <option value="M">Miles</option>
        </select>
    </form>


    <option value="K">Kilometer</option>
    <option value="M">Miles</option>
    <div id="txt"></div>
</body>

这是JavaScript代码：

function preveri(neke)
{
    neke=document.getElementById("chose1").value;
    if(neke=="C")
    {
        fahr=document.getElementById("c").value * 9 / 5 + 32;
        document.getElementById("f").value=Math.round(fahr);
    }else   
    {
        cels=(document.getElementById("f").value -32) * 5 / 9;
        document.getElementById("c").value=Math.round(cels);
    }
}

function preveri1(neke1)
{
    neke1=document.getElementById("chose2").value;
    if(neke1=="K")
    {
        kilo=document.getElementById("k").value * 0.621371;
        document.getElementById("m").value=Math.round(kilo);
    }else   
    {
        mile=(document.getElementById("m").value) / 0.621371;
        document.getElementById("k").value=Math.round(mile);
    }
}
function startTime()
{
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();
// doda 0 pred  števila<10
    m=checkTime(m);
    s=checkTime(s);
    document.getElementById('txt').innerHTML=h+":"+m+":"+s;
    t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i<10)
{
    i="0" + i;
}
    return i;
}

出了点问题，我不知道是什么，如果你能够帮助我，我就是JavaScript的初学者。

Answer 1

对于第一种形式，您的代码的问题是您始终只查看第一个选择，id =＆＃34; select1＆＃34;。因此，neke变量将始终包含第一个选择中选择的值。

还要注意你有id =＆＃34; choose2＆＃34;在同一页面中三次。 id唯一地标识HTML元素，因此不应该在同一页面中具有相同id的2个不同元素。

我修改了你的代码以适用于第一个表单。这不是最优雅的解决方案。我只想更好地向您展示问题所在：

<body onload="startTime()">
<p>Temparature</p>
<br />
<form>
    <input id="c" name="c" onkeyup="input1()">
    <select id="chose1">
        <option></option>
        <option value="C">Celzija</option>
        <option value="F">Farenhait</option>
    </select>
    <br />equals
    <br />
    <input id="f" name="f" onkeyup="input2()">
    <select id="chose2">
        <option></option>
        <option value="C">Celzija</option>
        <option value="F">Farenhait</option>
    </select>
</form>
<div id="txt"></div>

<script type="text/javascript">
function input1()
{
    neke=document.getElementById("chose1").value;

    if(neke=="C")
    {
        fahr=document.getElementById("c").value * 9 / 5 + 32;
        document.getElementById("f").value=Math.round(fahr);
    }else   
    {
        cels=(document.getElementById("f").value -32) * 5 / 9;
        document.getElementById("c").value=Math.round(cels);
    }
}

function input2() {
    neke=document.getElementById("chose2").value;

    if(neke=="C")
    {
        fahr=document.getElementById("c").value * 9 / 5 + 32;
        document.getElementById("f").value=Math.round(fahr);
    }else   
    {
        cels=(document.getElementById("f").value -32) * 5 / 9;
        document.getElementById("c").value=Math.round(cels);
    }

}

function startTime()
{
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();

    m=checkTime(m);
    s=checkTime(s);
    document.getElementById('txt').innerHTML=h+":"+m+":"+s;
    t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i<10)
{
    i="0" + i;
}
    return i;
}
</script>

Answer 2

我已经更新了您的代码，现在只有2个文本字段和许多不同的单位可供选择，在下拉框中。根据 #selected1 下拉框值，还有不同的选项。我还添加了一些输入验证，现在文本框中需要一个数字。无论如何，这是新代码：

HTML

<h1>What do you want to convert?</h1>
<input id="c" name="c" onkeyup="preveri()" onkeydown="validate(event)"> <!-- New function to make sure user enters a number -->
<select id="chose1" >
<option></option>
<option value="C">Celsius</option>
<option value="F">Farenhait</option>
<option value="KM">Kilometers</option>
</select><br />
equals<br />
<input id="f" name="f" disabled>
<select id="chose2">
<option></option>
</select> 
<div id="txt"></div>

的Javascript

    $( "#chose1" ).change(function(){ // When the value of #chose1 changes
    var choseval = $("#chose1").val(); // Get value of #chose1
    if(choseval == "C"){
        changeoption("#chose2", ["Farenhait", "Kelvin"], ["F1", "K1"]); // New custom function, changeoption(element, options [must be a list], values [must be a list]
    }
    if(choseval == "F"){
    changeoption("#chose2", ["Celsius", "Kelvin"], ["C2", "K2"]);
    }
    if(choseval == "KM"){
    changeoption("#chose2", ["Miles", "Feet"], ["M1", "Fe1"]);
    }
});

function changeoption(element, options, values){
    $(element).empty(); //Clear options
    var i = 0;
    while(i<options.length){ //Moves selected term in list
    $(element).append($("<option>").val(values[i]).html(options[i])); // Add our option and values
    i++; // Move onto next list item
    }} 

function preveri()
{
    var convert=document.getElementById("chose2").value; // What do we want to convert to? This works because there's only one possible value for each unit of measurement

    if(convert=="F1"){ // Farenhait for celsius
        cels=Number(document.getElementById("c").value *1.8) + 32;
        document.getElementById("f").value=Math.round(cels);
    }
    if(convert=="K1"){ // Kelvin for celsius
        cels=Number(document.getElementById("c").value) + 273.15;
        document.getElementById("f").value=Math.round(cels);
    }
    if(convert=="C2"){ // Celsius for farenhait
        cels=Number(document.getElementById("c").value - 32) * (5/9);
        document.getElementById("f").value=Math.round(cels);
    }
    if(convert=="K2"){ // Kelvin for farenhait
        cels=Number(document.getElementById("c").value - 32) * (5/9) + 273.15;
        document.getElementById("f").value=Math.round(cels);
    }
    if(convert=="M1"){ // Miles for kilometer
        cels=Number(document.getElementById("c").value) * 0.62137;
        document.getElementById("f").value=Math.round(cels);
    }
    if(convert=="Fe1"){ // Feet for kilometer
        cels=Number(document.getElementById("c").value) * 3280.8399;
        document.getElementById("f").value=Math.round(cels);
    }
}

function validate(e){ // Our validate function
    x = e.keyCode;
    if((x<60&&x>47)||x==8||(x<106&&x>95)||x==110||x==190||x==16||x==17||x==18){ // Ignore numbers and other important keys, such as SHIFT and CONTROL
        return;
    }
    else{window.setTimeout("remove()",1);} // Trigger remove
}

function remove(){ // Remove invalid character
    y = document.getElementsByName("c")[0];
    q = y.value;
    q = q.slice(0, - 1); // Remove end character from value
    y.value = q;
}

function checkTime(i)
{
if (i<10)
{
    i="0" + i;
}
    return i;
}

function startTime(){
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();
    // doda 0 pred  števila<10
    m=checkTime(m);
    s=checkTime(s);
    document.getElementById('txt').innerHTML=h+":"+m+":"+s;
    t=setTimeout('startTime()',500);
    }

$("docuemnt").ready(function(){ // I've moved your starttime function as I couldn't get it to work in JSFiddle with it being in the onload body tag attribute
    startTime();
});

CSS - 禁用样式文本框：

#f{
    -webkit-appearance: textfield;
    background-color: white;
    border: 2px inset;
    color: black;
}

我已经使用了一些JQuery，所以现在你必须导入它，这里是HTML - 重要的是在你的脚本之前导入，否则JQuery函数不会起作用：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

这是一个JSFiddle：http://jsfiddle.net/HZfYL/2/

如果您需要更多帮助，请随时发表评论

用于转换单位的HTML和JavaScript表单

2 个答案: