как отображать параметры тега select [duplicate]

Question

как отображать параметры тега select [duplicate]

У меня была та же проблема, и это происходит, когда я создаю новый проект.

То, что я делаю, это:

проверить обновления SDK
, затем обновить студийную версию Android,
, а затем повторно открыть проект
откройте файл andoridmanifest.xml
, удалив пробел между «_>» в android: label и save.

Это работает для меня.

96

javascript jquery html

задан Kara 11 May 2017 в 21:55

11 ответов

//use jquery
$select.trigger('mousedown')

-5

ответ дан anubiskong 18 August 2018 в 00:36

1

Протестировано в Firefox 37 и Chrome 41, чтобы подтвердить, что это не работает в настоящее время. – lulalala 9 April 2015 в 07:40
2

Возможно, пришло время удалить этот ответ. – Jose Manuel Abarca Rodríguez 10 January 2017 в 20:00

После попытки решить эту проблему в течение некоторого времени мне удалось найти также действующее решение:

var event = new MouseEvent('mousedown');
element.dispatchEvent(event);

Я попытался реализовать это и в JQuery, используя trigger и mousedown или только mousedown, но без успеха.

2

ответ дан Asaf David 18 August 2018 в 00:36

1

– Mathieu Bridon 13 January 2017 в 18:28
2

Не работает с Chrome 59 в Windows. Однако работает с FireFox 51 на Windows. – rainabba 19 April 2017 в 21:54

По крайней мере, в Геккосе это возможно. Посмотрите здесь:

edit: Я не мог заставить это работать; похоже, что Гарет прав ...

1

ответ дан Christoph 18 August 2018 в 00:36

Предлагаемое мной решение является безопасным, простым и совместимым с Internet Explorer, FireFox и Chrome.

Этот подход является новым и полным. Я не нашел ничего равного этому решению в Интернете. Это простой, кросс-браузер (Internet Explorer, Chrome и Firefox), сохраняет макет, использует сам выбор и прост в использовании.

Примечание: требуется JQuery.

HTML CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CustonSelect</title>
<script type="text/javascript" src="./jquery-1.3.2.js"></script>
<script type="text/javascript" src="./CustomSelect.js"></script>
</head>
<div id="testDiv"></div>
<body>
    <table>
        <tr>
            <td>
                <select id="Select0" >
                    <option value="0000">0000</option>
                    <option value="0001">0001</option>
                    <option value="0002">0002</option>
                    <option value="0003">0003</option>
                    <option value="0004">0004</option>
                    <option value="0005">0005</option>
                    <option value="0006">0006</option>
                    <option value="0007">0007</option>
                    <option value="0008">0008</option>
                    <option value="0009">0009</option>
                    <option value="0010">0010</option>
                    <option value="0011">0011</option>
                    <option value="0012">0012</option>
                    <option value="0013">0013</option>
                    <option value="0014">0014</option>
                    <option value="0015">0015</option>
                    <option value="0016">0016</option>
                    <option value="0017">0017</option>
                    <option value="0018">0018</option>
                    <option value="0019">0019</option>
                    <option value="0020">0020</option>
                    <option value="0021">0021</option>
                    <option value="0022">0022</option>
                    <option value="0023">0023</option>
                    <option value="0024">0024</option>
                    <option value="0025">0025</option>
                    <option value="0026">0026</option>
                    <option value="0027">0027</option>
                    <option value="0028">0028</option>
                    <option value="0029">0029</option>
                    <option value="0030">0030</option>
                    <option value="0031">0031</option>
                    <option value="0032">0032</option>
                    <option value="0033">0033</option>
                    <option value="0034">0034</option>
                    <option value="0035">0035</option>
                    <option value="0036">0036</option>
                    <option value="0037">0037</option>
                    <option value="0038">0038</option>
                    <option value="0039">0039</option>
                    <option value="0040">0040</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <select id="Select1" >
                    <option value="0000">0000</option>
                    <option value="0001">0001</option>
                    <option value="0002">0002</option>
                    <option value="0003">0003</option>
                    <option value="0004">0004</option>
                    <option value="0005">0005</option>
                    <option value="0006">0006</option>
                    <option value="0007">0007</option>
                    <option value="0008">0008</option>
                    <option value="0009">0009</option>
                    <option value="0010">0010</option>
                    <option value="0011">0011</option>
                    <option value="0012">0012</option>
                    <option value="0013">0013</option>
                    <option value="0014">0014</option>
                    <option value="0015">0015</option>
                    <option value="0016">0016</option>
                    <option value="0017">0017</option>
                    <option value="0018">0018</option>
                    <option value="0019">0019</option>
                    <option value="0020">0020</option>
                    <option value="0021">0021</option>
                    <option value="0022">0022</option>
                    <option value="0023">0023</option>
                    <option value="0024">0024</option>
                    <option value="0025">0025</option>
                    <option value="0026">0026</option>
                    <option value="0027">0027</option>
                    <option value="0028">0028</option>
                    <option value="0029">0029</option>
                    <option value="0030">0030</option>
                    <option value="0031">0031</option>
                    <option value="0032">0032</option>
                    <option value="0033">0033</option>
                    <option value="0034">0034</option>
                    <option value="0035">0035</option>
                    <option value="0036">0036</option>
                    <option value="0037">0037</option>
                    <option value="0038">0038</option>
                    <option value="0039">0039</option>
                    <option value="0040">0040</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <select id="Select2" >
                    <option value="0000">0000</option>
                    <option value="0001">0001</option>
                    <option value="0002">0002</option>
                    <option value="0003">0003</option>
                    <option value="0004">0004</option>
                    <option value="0005">0005</option>
                    <option value="0006">0006</option>
                    <option value="0007">0007</option>
                    <option value="0008">0008</option>
                    <option value="0009">0009</option>
                    <option value="0010">0010</option>
                    <option value="0011">0011</option>
                    <option value="0012">0012</option>
                    <option value="0013">0013</option>
                    <option value="0014">0014</option>
                    <option value="0015">0015</option>
                    <option value="0016">0016</option>
                    <option value="0017">0017</option>
                    <option value="0018">0018</option>
                    <option value="0019">0019</option>
                    <option value="0020">0020</option>
                    <option value="0021">0021</option>
                    <option value="0022">0022</option>
                    <option value="0023">0023</option>
                    <option value="0024">0024</option>
                    <option value="0025">0025</option>
                    <option value="0026">0026</option>
                    <option value="0027">0027</option>
                    <option value="0028">0028</option>
                    <option value="0029">0029</option>
                    <option value="0030">0030</option>
                    <option value="0031">0031</option>
                    <option value="0032">0032</option>
                    <option value="0033">0033</option>
                    <option value="0034">0034</option>
                    <option value="0035">0035</option>
                    <option value="0036">0036</option>
                    <option value="0037">0037</option>
                    <option value="0038">0038</option>
                    <option value="0039">0039</option>
                    <option value="0040">0040</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <select id="Select3" >
                    <option value="0000">0000</option>
                    <option value="0001">0001</option>
                    <option value="0002">0002</option>
                    <option value="0003">0003</option>
                    <option value="0004">0004</option>
                    <option value="0005">0005</option>
                    <option value="0006">0006</option>
                    <option value="0007">0007</option>
                    <option value="0008">0008</option>
                    <option value="0009">0009</option>
                    <option value="0010">0010</option>
                    <option value="0011">0011</option>
                    <option value="0012">0012</option>
                    <option value="0013">0013</option>
                    <option value="0014">0014</option>
                    <option value="0015">0015</option>
                    <option value="0016">0016</option>
                    <option value="0017">0017</option>
                    <option value="0018">0018</option>
                    <option value="0019">0019</option>
                    <option value="0020">0020</option>
                    <option value="0021">0021</option>
                    <option value="0022">0022</option>
                    <option value="0023">0023</option>
                    <option value="0024">0024</option>
                    <option value="0025">0025</option>
                    <option value="0026">0026</option>
                    <option value="0027">0027</option>
                    <option value="0028">0028</option>
                    <option value="0029">0029</option>
                    <option value="0030">0030</option>
                    <option value="0031">0031</option>
                    <option value="0032">0032</option>
                    <option value="0033">0033</option>
                    <option value="0034">0034</option>
                    <option value="0035">0035</option>
                    <option value="0036">0036</option>
                    <option value="0037">0037</option>
                    <option value="0038">0038</option>
                    <option value="0039">0039</option>
                    <option value="0040">0040</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <select id="Select4" >
                    <option value="0000">0000</option>
                    <option value="0001">0001</option>
                    <option value="0002">0002</option>
                    <option value="0003">0003</option>
                    <option value="0004">0004</option>
                    <option value="0005">0005</option>
                    <option value="0006">0006</option>
                    <option value="0007">0007</option>
                    <option value="0008">0008</option>
                    <option value="0009">0009</option>
                    <option value="0010">0010</option>
                    <option value="0011">0011</option>
                    <option value="0012">0012</option>
                    <option value="0013">0013</option>
                    <option value="0014">0014</option>
                    <option value="0015">0015</option>
                    <option value="0016">0016</option>
                    <option value="0017">0017</option>
                    <option value="0018">0018</option>
                    <option value="0019">0019</option>
                    <option value="0020">0020</option>
                    <option value="0021">0021</option>
                    <option value="0022">0022</option>
                    <option value="0023">0023</option>
                    <option value="0024">0024</option>
                    <option value="0025">0025</option>
                    <option value="0026">0026</option>
                    <option value="0027">0027</option>
                    <option value="0028">0028</option>
                    <option value="0029">0029</option>
                    <option value="0030">0030</option>
                    <option value="0031">0031</option>
                    <option value="0032">0032</option>
                    <option value="0033">0033</option>
                    <option value="0034">0034</option>
                    <option value="0035">0035</option>
                    <option value="0036">0036</option>
                    <option value="0037">0037</option>
                    <option value="0038">0038</option>
                    <option value="0039">0039</option>
                    <option value="0040">0040</option>
                </select>
            </td>
        </tr>
    </table>
    <input type="button" id="Button0" value="MoveLayout!"/>
</body>
</html>

КОД JAVASCRIPT

var customSelectFields = new Array();


// Note: The list of selects to be modified! By Questor
customSelectFields[0] = "Select0";
customSelectFields[1] = "Select1";
customSelectFields[2] = "Select2";
customSelectFields[3] = "Select3";
customSelectFields[4] = "Select4";

$(document).ready(function()
{


    //Note: To debug! By Questor
    $("#Button0").click(function(event){ AddTestDiv(); });

    StartUpCustomSelect(null);  

});


//Note: To test! By Questor
function AddTestDiv()
{
    $("#testDiv").append("<div style=\"width:100px;height:100px;\"></div>");
}


//Note: Startup selects customization scheme! By Questor
function StartUpCustomSelect(what)
{

    for (i = 0; i < customSelectFields.length; i++)
    {

        $("#" + customSelectFields[i] + "").click(function(event){ UpCustomSelect(this); });
        $("#" + customSelectFields[i] + "").wrap("<div id=\"selectDiv_" + customSelectFields[i] + "\" onmouseover=\"BlockCustomSelectAgain();\" status=\"CLOSED\"></div>").parent().after("<div id=\"coverSelectDiv_" + customSelectFields[i] + "\" onclick=\"UpOrDownCustomSelect(this);\" onmouseover=\"BlockCustomSelectAgain();\"></div>");


        //Note: Avoid breaking the layout when the CSS is modified from "position" to "absolute" on the select! By Questor
        $("#" + customSelectFields[i] + "").parent().css({'width': $("#" + customSelectFields[i] + "")[0].offsetWidth + 'px', 'height': $("#" + customSelectFields[i] + "")[0].offsetHeight + 'px'});

        BlockCustomSelect($("#" + customSelectFields[i] + ""));

    }
}


//Note: Repositions the div that covers the select using the "onmouseover" event so 
//Note: if element on the screen move the div always stand over it (recalculate! By Questor
function BlockCustomSelectAgain(what)
{
    for (i = 0; i < customSelectFields.length; i++)
    {
        if($("#" + customSelectFields[i] + "").parent().attr("status") == "CLOSED")
        {
            BlockCustomSelect($("#" + customSelectFields[i] + ""));
        }
    }
}


//Note: Does not allow the select to be clicked or clickable! By Questor
function BlockCustomSelect(what)
{

    var coverSelectDiv = $(what).parent().next();


    //Note: Ensures the integrity of the div style! By Questor
    $(coverSelectDiv).removeAttr('style');


    //Note: To resolve compatibility issues! By Questor
    var backgroundValue = "";
    var filerValue = "";
    if(navigator.appName == "Microsoft Internet Explorer")
    {
        backgroundValue = 'url(fakeimage)';
        filerValue = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=\'scale\', src=\'fakeimage\' )';
    }


    //Note: To debug! By Questor
    //'border': '5px #000 solid',

    $(coverSelectDiv).css({
        'position': 'absolute', 
        'top': $(what).offset().top + 'px', 
        'left': $(what).offset().left + 'px', 
        'width': $(what)[0].offsetWidth + 'px', 
        'height': $(what)[0].offsetHeight + 'px', 
        'background': backgroundValue,
        '-moz-background-size':'cover',
        '-webkit-background-size':'cover',
        'background-size':'cover',
        'filer': filerValue
    });

}


//Note: Allow the select to be clicked or clickable! By Questor
function ReleaseCustomSelect(what)
{

    var coverSelectDiv = $(what).parent().next();

    $(coverSelectDiv).removeAttr('style');
    $(coverSelectDiv).css({'display': 'none'});

}


//Note: Open the select! By Questor
function DownCustomSelect(what)
{


    //Note: Avoid breaking the layout. Avoid that select events be overwritten by the others! By Questor
    $(what).css({
        'position': 'absolute', 
        'z-index': '100'
    });


    //Note: Open dropdown! By Questor
    $(what).attr("size","10");

    ReleaseCustomSelect(what);


    //Note: Avoids the side-effect of the select loses focus.! By Questor
    $(what).focus();


    //Note: Allows you to select elements using the enter key when the select is on focus! By Questor
    $(what).keyup(function(e){
        if(e.keyCode == 13)
        {
            UpCustomSelect(what);
        }
    });


    //Note: Closes the select when loses focus! By Questor
    $(what).blur(function(e){
        UpCustomSelect(what);
    });

    $(what).parent().attr("status", "OPENED");

}


//Note: Close the select! By Questor
function UpCustomSelect(what)
{

    $(what).css("position","static");


    //Note: Close dropdown! By Questor
    $(what).attr("size","1");

    BlockCustomSelect(what);

    $(what).parent().attr("status", "CLOSED");

}


//Note: Closes or opens the select depending on the current status! By Questor
function UpOrDownCustomSelect(what)
{

    var customizedSelect = $($(what).prev().children()[0]);

    if($(what).prev().attr("status") == "CLOSED")
    {
        DownCustomSelect(customizedSelect);
    }
    else if($(what).prev().attr("status") == "OPENED")
    {
        UpCustomSelect(customizedSelect);
    }

}

3

ответ дан Eduardo Lucio 18 August 2018 в 00:36

1

Я создал jsfiddle с этим, и он, похоже, не работает ... jsfiddle.net/rL53xj11 – mix3d 30 September 2015 в 19:07
2

– Jon Coombs 12 December 2016 в 22:47
3

@JonCoombs Да, это работает. У меня есть клиентское приложение, в котором это решение работает отлично. Обратите внимание, однако, что этому коду уже 2 года. Я рекомендую тестирование на html-файле на вашем локальном компьютере самостоятельно. Также обратите внимание на версию вашего jquery. – Eduardo Lucio 16 December 2016 в 19:42

Я уверен, что ответ таков: Нет. Вы можете выбирать варианты с помощью JavaScript, но не открывать выбор. Вы должны использовать пользовательское решение.

3

ответ дан Eric Wendelin 18 August 2018 в 00:36

Я использую это ... но он требует, чтобы пользователь нажимал на поле выбора ...

Вот две функции javascript

function expand(obj)
{
    obj.size = 5;
}
function unexpand(obj)
{
    obj.size = 1;
}

, затем я создаю select box

<select id="test" multiple="multiple" name="foo" onFocus="expand(this)" onBlur="unexpand(this)">
<option >option1</option>
<option >option2</option>
<option >option3</option>
<option >option4</option>
<option >option5</option>
</select>

Я знаю, что этот код немного запоздал, но я надеюсь, что это поможет кому-то, у кого была такая же проблема, как и я.

ps / fyi я не тестировал код выше (я динамически создаю окно выбора), а код, который я написал, был протестирован только в FireFox.

23

ответ дан Jason de Belle 18 August 2018 в 00:36

1

+1, делал аналогичные вещи раньше, я считаю, что я также установил его положение абсолютным, когда оно было расширено, чтобы оно не нарушало поток документов и возвращалось к блоку, когда оно было свернуто. – CaffGeek 9 October 2009 в 20:05
2

Привет, Чад, ваши комментарии помогли мне решить проблему! Желаю, чтобы я мог +1 вы обратно;) – Jason de Belle 9 October 2009 в 20:42
3

В моем случае это не решило бы проблему точно, но это был бы вариант. +1 – Darryl Hein 9 October 2009 в 23:07
4

@DarrylHein: В этом случае это не просто опция , это 5 <option> s ... – awe 7 June 2013 в 12:45
5

очень хитрый, спасибо. – Dan Ochiana 11 May 2017 в 11:40

У меня была эта проблема ... и нашел работоспособное решение.

Я не хотел, чтобы окно выбора отображалось до тех пор, пока пользователь не щелкнул какой-то простой HTML. Поэтому я наложил элемент select на opacity=.01. После нажатия, я изменил его на opacity=100. Это позволило мне скрыть выбор, и когда пользователь нажал на текст, появится выбор с отображаемыми параметрами.

21

ответ дан Jason Plank 18 August 2018 в 00:36

1

Разве это не просто скрытие / показ фактического поля выбора? Речь идет о показе / открытии списка опций. – Darryl Hein 28 September 2009 в 23:29
2

Мой метод показывает отображение / открытие списка опций вместе с самим полем выбора. Единственный способ открыть список опций - это нажать кнопку выбора. Который я выполнил, незаметно наложив выделение поверх некоторого целевого текста. – Phil 29 September 2009 в 16:24
3

Это было единственное решение, способное стилизовать кнопку меню выбора в багги WebView от Android. Спасибо! – Riplexus 16 June 2013 в 17:34
4

Спасибо, смотрел это на пару часов. Это должен быть принятый ответ! – avb 10 July 2014 в 10:48
5

Это не отвечает на вопрос, но оно представляет собой обходное решение для случая, когда вы хотите создать стиль & lt; select & gt; элемент, все еще предоставляя собственный элемент управления, что является причиной того, что вам может потребоваться открыть параметры с помощью js. Если вы установите непрозрачность параметра & lt; select & gt; до 0, когда пользователь нажимает на невидимый выбор, выпадающие параметры будут отображаться как обычно. – Chris Snyder 21 July 2015 в 14:57

Это работает в Google Chrome

dropDown = function (elementId) {
    var dropdown = document.getElementById(elementId);
    try {
        showDropdown(dropdown);
    } catch(e) {

    }
    return false;
};

showDropdown = function (element) {
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);
};

27

ответ дан Mayank Pathak 18 August 2018 в 00:36

1

Не работал для меня. – Steve Meisner 25 February 2014 в 00:44
2

FYI: Это работало для меня на Chrome 35.0.1916.153 Убедитесь, что вы передаете фактический элемент, а не объект jQuery. – ShawnFumo 3 July 2014 в 20:30
3

Это работает и в последней хромированной Opera. – NoOne 25 April 2015 в 16:22
4

К сожалению, теперь он устарел на Chrome 53 + – Washington Guedes 27 September 2016 в 19:58
5

Не работает с Chrome 59 в Windows. – rainabba 19 April 2017 в 21:54

Это очень поздно, но я подумал, что это может быть полезно кому-то, если они будут ссылаться на этот вопрос. Я верю, что ниже JS будет делать то, что задано.

<script>     
         $(document).ready(function()
           {
          document.getElementById('select').size=3;
           });
    </script>

3

ответ дан Rhys 18 August 2018 в 00:36

1

Немного отличается, потому что это позволит отрегулировать этот фактический размер для выбора, а не отображать все значения выбора. Если у вас есть, как и в вашем примере, 3 варианта, то это отобразит их все, но также отрегулирует расположение вашей страницы. – Darryl Hein 5 November 2012 в 04:28
2

~ Рэйс спасибо! это привело меня к большему количеству идей. Попробуйте это, он будет установлен на точную высоту, необходимую для элементов управления select. $ («select: visible») каждый (функция (i, e) {e.size = e.length;}); – Sabo 3 June 2013 в 12:22
3

Не хорошая идея. Установка размера в элементе выбора меняет его из выпадающего списка в список (используя терминологию управления Windows). Проблемы, которые возникают, это то, что вы должны следить за выпадающим списком, включая место размещения (он не плавает над страницей, как истинное выпадающее меню), закрытие (если пользователь щелкает в другом месте, список остается видимым). Я потратил много времени на игру с размером. В любом случае, мобильное сафари все равно игнорирует его. – axeman 14 April 2015 в 02:26

<select id="myDropDown">
  <option>html5</option>
  <option>javascript</option>
  <option>jquery</option>
  <option>css</option>
  <option>sencha</option>
</select>

По jQuery:

var myDropDown=$("#myDropDown");
var length = $('#myDropDown> option').length;
//open dropdown
myDropDown.attr('size',length);
//close dropdown
myDropDown.attr('size',0);

По javascript:

var myDropDown=document.getElementById("myDropDown");
var length = myDropDown.options.length;
//open dropdown
myDropDown.size = length;
//close dropdown
myDropDown.size = 0;

Скопировано из: Открыть закрыть select

0

ответ дан Syed Nasir Abbas 18 August 2018 в 00:36

1

Это не открывает выбор, это расширяет его. – Azimuth 16 August 2018 в 12:22

Другие вопросы по тегам:

javascript jquery html

как отображать параметры тега select [duplicate]

11 ответов

Похожие вопросы: