2

次のコードでは、非表示の選択ボックスが表示されている選択ボックスの下に表示されると想定しています。これは、ボタンが表示されている選択の横に使用可能なスペースを取得しているためです。その結果、選択ボックスが表示されると、表示されている選択の下に「ドロップ」します。 .
私は正しいですか？
では、ボタンを「移動」して、最初の選択の隣に 2 番目の選択を配置するにはどうすればよいでしょうか。 

<html>  
<body>  
    <table>  
        <tr>
            <td id="t">  
                <div id="select1">  
                    <select>  
                        <option>  
                            John Smith    
                        </option>  
                        <option>  
                            Bill Johnson  
                        </option>  
                        <option>  
                            Mary Jones    
                        </option>  
                    </select>   
                </div>  
                <div id="select2" style="display:none">  
                    <select>  
                        <option>  
                            CA      
                        </option>  
                        <option>  
                            AZ     
                        </option>    
                        <option>    
                            NV      
                        </option>   
                    </select>   
                </div>
            </td>  
            <td><input type="submit" value="Press me!" onclick="doit()"/>  </td>
        </tr>  
</table>  

<script type="text/javascript">  
    function doit() {  
        document.getElementById("select2").style.display="block";  
    }   
</script>    
</body>  
</html>
4

3 に答える 3

2

デモはこちらです。

Divタグはデフォルトでブロック要素です。これは、次の要素を次の行に分割することを意味するため、インライン プロパティを適用することで、強制的に同じ行に留まるようにしました。

display:inlineあなたが必要とするプロパティです：

<html>  
 <body>  
    <table>  
        <tr>
            <td id="t">  
                <div id="select1" style="display:inline">  
                    <select>  
                        <option>  
                            John Smith    
                        </option>  
                        <option>  
                            Bill Johnson  
                        </option>  
                        <option>  
                            Mary Jones    
                        </option>  
                    </select>   
                </div>  
                <div id="select2"  style="display:none">  
                    <select>  
                        <option>  
                            CA      
                        </option>  
                        <option>  
                            AZ     
                        </option>    
                        <option>    
                            NV      
                        </option>   
                    </select>   
                </div>
            </td>  
            <td><input type="submit" value="Press me!" onclick="doit()"/>  </td>
        </tr>  
</table>  

<script type="text/javascript">  
    function doit() {  
        document.getElementById("select2").style.display="inline";  
    }   
</script>    
</body>  
</html>
于 2013-06-09T12:38:45.520 に答える
0

私があなたの質問を理解していれば、答えは... 

<html>  
<body>  
<table>  
    <tr>
        <td id="t">  
            <div id="select1" >  
                <select>  
                    <option>  
                        John Smith    
                    </option>  
                    <option>  
                        Bill Johnson  
                    </option>  
                    <option>  
                        Mary Jones    
                    </option>  
                </select>   

                <select id="select2" style="display:none">  
                    <option>  
                        CA      
                    </option>  
                    <option>  
                        AZ     
                    </option>    
                    <option>    
                        NV      
                    </option>   
                </select>   
            </div>
        </td>  
        <td><input type="submit" value="Press me!" onclick="doit()"/>  </td>
    </tr>  
</table>  

<script type="text/javascript">  
    function doit() {  
        document.getElementById("select2").style.display="inline";  
}   
</script>    
</body>  
</html>
于 2013-06-09T12:43:59.977 に答える