2

ここに jsfiddle があります: http://jsfiddle.net/JQnUs/4/

HTML:

<div class="problem-select">
    <select>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <input type="hidden" value="1" />    
</div>

<div class="overlapping-div">

</div>

<div class="hover-here">Hover here</div>

<input class="other-input" type="text" />

CSS:

.problem-select {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;
}

.overlapping-div {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
    background-color: red;
    z-index: 100;
    display: none;
}

.hover-here {
    position: absolute;
    right: 70px;
    top: 0px;
    border: 1px solid black;
    height: 100px;
    width: 100px;
}

.other-input {
    position: absolute;
    top: 200px;
    left: 0px;
}

jQuery (1.8.2 を使用):

jQuery(document).ready(function() {
    jQuery(".hover-here").hover(function(){ showDiv(); }, function(){ hideDiv(); });
    //Used in potential solution 7...
    //jQuery("select").change(function(){ jQuery(this).siblings('input').val(jQuery(this).val()); });
});

function showDiv() {
    //Potential solution number 1... (does't work in chrome or safari)
    //jQuery('select').blur();

    //Potential solution number 2... (leaves lines on top of the red div)
    //jQuery('option').hide();

    //Potential solution number 3... (doesn't work in safari and still has the issue of working out which selects to hide)
    //jQuery('select').hide();

    //Potential solution number 4... (doesn't hide drop down options at all and would also need to know which selects to disable)
    //jQuery('select').attr('disabled','disabled');

    //Potential solution number 5... (doesn't work at all)
    //jQuery(".hover-here").click();

    //Potential solution number 6... (doesn't work in safari or chrome)
    //jQuery('.other-input').focus();

    //Potential solution number 7... (doesn't work in safari)
    //innerHtml = jQuery('.problem-select').html();
    //value = jQuery('.problem-select').children("input").val();
    //jQuery('.problem-select').html(innerHtml);
    //jQuery('.problem-select').children("select").val(value);


    jQuery('.overlapping-div').show();
}

function hideDiv() {
    //Potential solution number 2 cont...
    //jQuery('option').show();

    //Potential solution number 3 cont...
    //jQuery('select').show();

    //Potential solution number 4 cont...
    //jQuery('select').attr('disabled',null);

    jQuery('.overlapping-div').hide();
}

選択ボックスをクリックして開き、選択ボックスからオプションを選択したり、ページの他の場所をクリックしたりせずに右側の div にカーソルを合わせると、表示される赤い div の上に選択オプションが表示されます。 .

私が試したことのいくつかはフィドルにあり、関連するセクションのコメントを外して、何が起こるかを確認する必要があります。それらのほとんどは Firefox で動作し、サファリでは動作しません。

実際のアプリケーションで私が直面している追加の問題は、選択ボックスが赤い div の下にある場合とない場合があるため、選択ボックスのオプションが赤い div を覆い隠すか、引き続き許可するかを決定できるようにする必要があることです。通常の使用 (オプションの選択)。(アプリケーションでは、ページで他のアクションを実行している間、赤い div を表示したままにすることができます)。

赤い div で覆われていない場合、選択ボックスの機能に影響を与えずに、chrome、safari、ie7-9、および firefox の赤い div の上に表示されるオプション リストを停止するにはどうすればよいですか?

私の経験では、さまざまなイベントで定期的にトリガーされる機能を変更するアプリケーションではうまく機能しないため、他のhtml要素を使用して選択ボックスを再作成するプラグインの使用を避けようとしています。

4

2 に答える 2

3

Mobile Safari でアプリケーションをテストしているときに、まったく同じ問題に遭遇しました。Mobile Safari がドロップダウン選択を「ポップオーバー」選択に変更するため、どうやら .hide() は機能しません。妥協案として、不要なオプションを単純に無効にすることにしました。

    $(document).ready(function(){
        $("#yourSelectDiv").change(function(){
        //target an attribute from your first drop down)
        if ( $(“#yourSelectID option:selected”).attr(“data-custom”) == ’yourCustomAttribute’){
        //reset the second drop down to default position
        $(“#yourOtherSelectID”).get(0);
        //set disabled to true or false on the second drop down 
        $("#yourOtherSelectID option[value='yourSelectValue']").attr('disabled',false);
        $("#yourOtherSelectID option[value='yourSelectValue']").attr('disabled’,true);
    });
    });
于 2015-11-26T12:27:45.650 に答える
0

私は可能な解決策を見つけました：

.hover-here div にカーソルを合わせると、次のルールを追加するクラスを select に追加します。

.hide-select {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

（このページから取得）

まだすべてのブラウザでテストしていませんが、Chrome と IE9 では問題なく動作するようです :)

自分でテストしてください: http://jsfiddle.net/JQnUs/6/

編集 結局、IE9 ではうまく機能していないようです。それでも機能しますが、後でドロップダウンが台無しになっています..修正を探しています。

于 2012-11-29T15:14:10.950 に答える