1

これに関する私の最終的な目標は、ユーザー入力も可能にするドロップダウンを作成することです。私ができる最善の方法は、ドロップダウンの隣にテキストボックスを配置して、似ているように見せることです。私が直面している問題は、ドロップダウン値が変更されるたびにテキストボックスを更新する必要があることです。遊んでいるコードがいくつかありますが（以下）、どこにも行けないようです！これを機能させる方法についての指針はありますか、それとも構文を台無しにしていますか? (jscript と html の両方にとってかなり新しい)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<style type="text/css">     
    select 
    {
        width:200px;
    }
</style>
<head>
    <title>Test</title>
    <script type="text/JavaScript">

        var select = document.getElementById('theItems');
        var input = document.getElementById('stroke');
        function otherSelect()  
        {
            input.value = select.value;
        }
    </script>
</head>
<body>
<form action="" method="">
    <input name="stroke"/>
    <select name="theItems" onchange="otherSelect()">
        <option value="item1">Item One</option>
        <option value="item2">Item Two</option>
        <option value="item3">Item Three</option>
        <option value="item3">Item Four</option>
        <option value="other">Other</option>      
    </select>

    <div id="otherBox" style="visibility: hidden;">
        If other: <input name="otherField" type="text" /> 
    </div>
</form>


</body>
4

4 に答える 4

0

window.onloadイベントでスクリプトを実行する必要があります。要素は、実行中のスクリプトでは使用できません。スクリプトをこれに変更します

<script type="text/JavaScript">
window.onload  = function(){

    var select = document.getElementById('theItems');
    var input = document.getElementById('stroke');
    function otherSelect()  
    {
        input.value = select.value;
    }
}
</script>

このようにして、スクリプトは HTML 要素がブラウザによってレンダリングされた後に実行されます。

于 2013-07-29T17:29:00.227 に答える
0

これは、必要なものの単純な純粋な JavaScript実装です。http://jsfiddle.net/24Xhn/

マークアップをセットアップして、選択ボックスと他の入力ボックスが同様の name および id 属性を持つようにします。クラスを使用して onchange イベントをセットアップ/初期化し、入力が非表示および無効になっていることを確認します。「無効」属性を true または false に切り替えることで、フォームが送信されたときに入力または選択が表示されないようにし、さまざまな組み合わせで JSFiddle にフォームを送信すると、クエリに出力が表示されます。 URL の文字列。

HTML

<select id="items1" name="items1" class="select-other">
    <option value="item1">Item One</option>
    <option value="item2">Item Two</option>
    <option value="item3">Item Three</option>
    <option value="item3">Item Four</option>
    <option value="other">Other</option>      
</select>
<input id="items1-other" name="items1-other" class="input-other" />

JS

// setup
var inps = document.getElementsByClassName("input-other");
for(var i=0; i<inps.length; i++) {
    var inp = inps[i];
    // hide & disable the "other" input
    inp.style.display = "none";
    inp.disabled = true;
    // set onchange, if input is empty go back to select
    inp.onchange = function() {
        var val = this.value;
        if(val == "") {
            this.style.display = "none";
            this.disabled = true;
            // get its associated select box
            var sel = document.getElementById(this.id.replace(/-other$/i, ""));
            sel.style.display = "";
            sel.disabled = false;
        }
    };
}
var sels = document.getElementsByClassName("select-other");
for(var i=0; i<sels.length; i++) {
    var sel = sels[i];
    // set onchange if value is other switch to input
    sel.onchange = function() {
        var val = this.value;
        if(val == "other") {
            this.style.display = "none";
            this.disabled = true;
            // get associated input box
            var inp = document.getElementById(this.id + "-other");
            inp.style.display = "";
            inp.disabled = false;
        }
    };
}
于 2013-07-29T17:59:16.347 に答える
0

私はちょうど何が間違っていたかを理解しました。html をコピーしてテスト アプリケーションに貼り付け、問題を解決するまで、html を実際に見ていませんでした。

idタグをname タグstrokeではなくに設定する必要があります。theItems何もしていないのはそのためです。終了タグがなかったため、コピー/貼り付けの問題もあったと思いますがhtml、それをコピーし忘れただけだと思いました。また、を取得するためにグローバル変数は実際には必要ありません。input実際selectの関数内でそれらが必要なだけで、実際にそのselectように関数に渡すことができます。

あなたのコードは修正されました:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Test</title>
    <style type="text/css">     
        select 
        {
            width:200px;
        }
    </style>
    <script type="text/javascript">

        function otherSelect(obj)  
        {           
            var input = document.getElementById('stroke');
            input.value = obj.value;
        }
    </script>
</head>
<body>
<form action="" method="">
    <input id="stroke" name="stroke"/>
    <select id="theItems" name="theItems" onchange="otherSelect(this)">
        <option value="item1">Item One</option>
        <option value="item2">Item Two</option>
        <option value="item3">Item Three</option>
        <option value="item3">Item Four</option>
        <option value="other">Other</option>      
    </select>

    <div id="otherBox" style="visibility: hidden;">
        If other: <input name="otherField" type="text" /> 
    </div>
</form>


</body>
</html>
于 2013-08-06T16:52:36.257 に答える