質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.11%

セレクトボックスを開きたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,597

reo_888

score 4

お世話になります
現在aspxで画面を作成中です。

画面の右下に常にテキストを透過させて表示しています。

<div id="TEXT" onclick="noClick(event.clientX, event.clientY)">テキスト</div>


透過させているため画面の項目は見えてはいますがテキストが前面にあるためクリックなどができませんでした。
当初は

pointer-events: none;

 で全面テキストのクリックの無効透過
をしていましたが、IE7を使用しなくてはいけなくなりこの方法は断念。

次にjavascript処理で
1、クリックした瞬間にクリック座標を取得

onclick="noClick(event.clientX, event.clientY)" 

2、前面テキストを非表示

document.getElementById("TEXT").style.display = "none";

3、取得した座標にある要素を取得

 elemnt = document.elementFromPoint(X, Y);


4、要素をクリックまたはフォーカスを合わせる

elemnt.click()


5、前面テキストの再表示

document.getElementById("TEXT").style.display = "block";


という様にしてボタンもテキストボックスもテキストの背面に来ても触れたのですが!

セレクトボックスだけがうまくいかず、フォーカスは合うのですが展開されないのです。

そこで、セレクトボックスを展開する方法はありますか?
また別の方法で全面テキストの裏側を触る方法はありますか?

どうぞよろしくお願いいたします。

追記

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm2.aspx.vb" Inherits="FLEX.WebForm2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml"
<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title></title>
    <style type = "text/css">
           .unitnumber {

            font-size: 130px;
            position: fixed;
            filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
        }
    </style>
    <script language="javascript" type ="text/javascript" >
        function noClick(X, Y) {
            //X,Yでクリック座標を取得

            //テキストを消す
            document.getElementById("TEXT").style.display = "none";


            //取得した座標にある要素を取得
            elemnt = document.elementFromPoint(X, Y);


            //取得した要素にフォーカスを当てる
            //elemnt.focus()

            //取得した要素をクリック
            elemnt.click()

            //テキストを出す
            document.getElementById("TEXT").style.display = "block";

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div class="unitnumber" id="TEXT" onclick="noClick(event.clientX, event.clientY)" 
              style="font-family: メイリオ; font-weight: bold; font-size: 25vw; z-index: 10;" >TEXT</div>
        <asp:Button ID="Button1" runat="server" Text="Button" Width="108px" />
        <br />
        <asp:DropDownList ID="DropDownList1" runat="server" Height="31px" Width="105px" 
            Font-Size="Larger">
            <asp:ListItem>TEST1</asp:ListItem>
            <asp:ListItem>TEST2</asp:ListItem>
            <asp:ListItem>TEST3</asp:ListItem>
            <asp:ListItem>TEST4</asp:ListItem>
            <asp:ListItem>TEST5</asp:ListItem>
            <asp:ListItem>TEST6</asp:ListItem>
        </asp:DropDownList>

    </div>
    </form>
</body>
</html>

デモイメージですがこんな感じです。ここのリストを触りたいです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2017/06/01 16:57 編集

    ご提示のソース内にセレクトボックスに該当するものが見当たらないのですが・・・。コードを提示する場合はなるべく全体像の見える状態にしてもらえると助かります。

    キャンセル

  • SurferOnWww

    2017/06/01 17:56

    ASP.NET のタグが付いてますが、少なくとも質問内容を見る限り ASP.NET は関係ないようにみえますが?

    キャンセル

  • reo_888

    2017/06/01 18:15

    ありがとうございます。Visual Web Developerでプログラムしていたためファイルがaspだったのでタグを追加していました。確かにaspかどうかはあまり関係なっかたかもしれません。

    キャンセル

  • SurferOnWww

    2017/06/01 18:22

    であれば、ASP.NET のタグは外していただけると幸いです。自分のようにタグで特定のカテゴリーのスレッドだけを見ている者には見やすくなりますので。

    キャンセル

回答 1

checkベストアンサー

+1

selectはclickイベントでは制御できないようです。
JavaScript - javascriptでselectタグを開く方法(17636)|teratail

Unfortunately there's a simple answer to this question, and it's "No"
javascript - Is it possible to use JS to open an HTML select to show its option list? - Stack Overflow

You cannot open a select element with a script.
How do you open a select box with JavaScript? | Solidly Stated

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/06/01 18:51 編集

    ありがとうございます

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.11%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる