0

ユーザーが選択した内容に応じて結果を表示するフォームを作成しました。特定の値を選択する際のデータシート1を出力するifステートメントをまとめようとしています。誰かが525と134と290を選んでデータシート1をくれたら、それ以外の場合はデータシート3をくれたらいいのですが。私のコードは次のとおりです。

<form name="test" id="test"">
    <label for="select1">Height in (mm)</label>
        <select name="division-select" id="height">
        <option label="Please Select"></option>
            <option value="525">525 or less</option>
            <option value="645">645 or less</option>
            <option value="1265">up to 1265</option>
            <option value="1270">more than 1265</option>
        </select>
        <label for="select1">Width in (mm)</label>
        <select name="division-select" id="width">
        <option label="Please Select"></option>
            <option value="134w">134 or less</option>
            <option value="190w">190 or less </option>
            <option value="290w">290 or less</option>
            <option value="328w">328 or less</option>
            <option value="420w">420 or more</option>
        </select>
        <Br>
        <br>
        <label for="select1">Depth in (mm)</label>
        <select name="division-select" id="depth">
        <option label="Please Select"></option>
            <option value="134d">134 or less</option>
            <option value="190d">190 or less </option>
            <option value="290d">290 or less</option>
            <option value="328d">328 or less</option>
            <option value="420d">420 or more</option>
        </select>
        <br><br>
        <h2>Or select by load</h2>
        <label for="select1">Load in (kN)</label>
        <select name="division-select" id="load">
            <option label="Please Select"></option>
            <option value="2-5">2.5 or less</option>
            <option value="5">5 or less </option>
            <option value="10">10 or less</option>
            <option value="25">25 or less</option>
            <option value="50">50 or more</option>
        </select>
        <br>
        <p><input type="button" onclick="calculate();" value="Find your Datasheet" /><input type="button" onclick="formReset()" value="Reset form"></p>

</form>
<div id="result">
</div>
<script type="text/javascript">
function calculate() {
    var height = document.getElementById('height').value;
    var width = document.getElementById('width').value;
    var depth = document.getElementById('depth').value;
    var load = document.getElementById('load').value;
    if (document.getElementById("height").value == "") {
        var heightmsg = "Please select your sample's height.";
        document.getElementById("result").innerHTML = heightmsg;
        return false;
    }
    if (document.getElementById("width").value == "") {
        var widthmsg = "Please select your sample's width.";
        document.getElementById("result").innerHTML = widthmsg;
        return false;
    }
    if (document.getElementById("depth").value == "") {
        var depthmsg = "Please select your sample's depth.";
        document.getElementById("result").innerHTML = depthmsg;
        return false;
    }
    if (height === "525" && width === "134" && depth === "290") {
        if (height === "525" && width === "290" && depth === "134") {
            var str = '<a href="#">Download your Datasheet 1</a>';
        } else {
            var str = '<a href="#">Download your Datasheet 3</a>';
        }
    } else if (height == 1270) {
        var str = "This configuration is beyond the standard range of top-load testers. Please contact Mecmesin Sales to discuss ways to meet your requirements.";
    }
    document.getElementById("result").innerHTML = str;
}

function formReset() {
    document.getElementById("test").reset();
}
</script>

前もって感謝します。

4

3 に答える 3

3

幅と深さの値はwとdで終わります（例<option value="190d">）が、if条件（）でそれをチェックしていませんif (height === "525" && width === "134" && depth === "290")。次のような値からwとdを取り出します。

<select name="division-select" id="width">
    <option label="Please Select"></option>
    <option value="134">134 or less</option>
    <option value="190">190 or less</option>
    <option value="290">290 or less</option>
    <option value="328">328 or less</option>
    <option value="420">420 or more</option>
</select>

jsFiddleの例

補足：あなたは決して真になることができないように見える状態を持っています：

if (height === "525" && width === "134" && depth === "290") {
    if (height === "525" && width === "290" && depth === "134")...
于 2013-03-22T15:34:05.760 に答える
1 
if (height === "525" && width === "134" && depth === "290") {
    if (height === "525" && width === "290" && depth === "134") {

意味がありません。最初の条件が真の場合、2番目の条件が真になることはありません。私はあなたが欲しいと思います

if (height === "525" && width === "290" && depth === "134")
    var str = '<a href="#">Download your Datasheet 1</a>';
else if (height === "525" && width === "134" && depth === "290")
    var str = '<a href="#">Download your Datasheet 3</a>';
else if (height == 1270)
    var str = "This configuration is beyond the standard range of top-load testers. Please contact Mecmesin Sales to discuss ways to meet your requirements.";

また、<option>タグの値には接尾辞とが付いているwためd、接尾辞のない数字とは等しくないことに注意してください。

于 2013-03-22T15:37:10.360 に答える
0

使用しているifステートメントが多すぎます。3つの選択入力（幅、高さ、深さ）のすべてのオプションに個別のリンクを指定する場合は、4x5x5 =100ifステートメントになります。これを回避する最も簡単な方法は、すべての値と対応するリンクを使用してmysqlデータベースを作成することです。あるいは、XMLまたはJSON配列を使用することもできます。

空の選択入力検証には、次のものを使用できます。

var height = document.getElementById('height'),
    width = document.getElementById('width'),
    depth = document.getElementById('depth'),
    load = document.getElementById('load'),
    result = document.getElementById('result'),
    arr = [height, width, depth],
    error = "Please select your sample's ";

for (var i = 0; i < arr.length; i++) {
    var t = arr[i].id;
    if (arr[i].value == "") result.innerHTML = error + t;
    return false;
}

JSONの例については、jsfiddleのデモを参照してください。

于 2013-03-22T19:46:18.550 に答える