Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > select с невыбираемым элементом


Автор: integral 4.9.2008, 14:01
нужно сделать селект (выпадающий список) где при загрузки страницы отображается первый елемент, но потом его выбрать уже нельзя. Т.е. когда страница загрузилась пользователь видит селект типа:   
------------------------
|выбрать элемент|
------------------------
раскрывает список и он становится как:
------------------------
|выбрать элемент|
|первый                |
|второй                |
------------------------
при этом "выбрать элемент" уже нельзя выбрать (на подобии ) OPTGROUP

что-то никак не выходит нормально такое сделать.... :(
у кого есть идеи? куда копать?
спасибо

ЗЫ: если не в тот форум - то переместите плиз куда надо

Автор: InvalidProperty 4.9.2008, 14:41
если тебе прям так критично, то, почему бы, при выборе селекта не удалять первый элемент из списка? т.е. список уже реально будет содержать элементы, без "выбрать элемент"

Автор: integral 4.9.2008, 14:55
а если пользователь откроет посмотри и ничего не выберет - что тогда?

Автор: bars80080 4.9.2008, 16:19
тогда выбрать оставшийся первый элемент

Автор: integral 4.9.2008, 17:19
тогда получится 
------------------------
|первый                |
|второй                |
------------------------

не то, т.к. пропадет "выбрать элемент"

Автор: Hades 4.9.2008, 17:25
Код

<select id="rfg" onclick="ff();">
    <option>select</option>
    <option>123</option>
    <option>456</option>
</select>
    
<script type="text/javascript">
    function ff() {
        var select = document.getElementById('rfg');
            
        if (0 == select.selectedIndex) {
            select.options.item(0).selected = false;
            select.options.item(1).selected = true;
        }
    }
</script>

Автор: integral 4.9.2008, 17:39
так пользователь может визуально выбрать вариант "select", просто он будет перезаменен на "123"
а надо подобии  OPTGROUP

Автор: ksnk 4.9.2008, 17:58
integral, Эмулировать все это добро Див'ами. Родной select тут не поможет.

Автор: integral 4.9.2008, 17:59
ого, а как ЭТО эмулировать дивами?!

Автор: ksnk 4.9.2008, 18:13
integral, Здесь обсуждается целая http://forum.vingrad.ru/forum/topic-151005/kw-select-ajax-option-%D0%B0%D0%B2%D1%82%D0%BE%D0%BF%D0%BE%D0%B4%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD.html как обычный select заменить на комплект дивов. 

Своими словами - вместо select'а ставим один див или input. по onclick на него или по рядомрасположенной кнопке - выводим другой... Обычная выпадающая менюшка на JS с некоторыми извращениями ;-)

Автор: SelenIT 4.9.2008, 18:49
Цитата
а если пользователь откроет посмотри и ничего не выберет - что тогда?

А тогда событие onchange не наступит, и, соответственно, ничего не удалится (проверено в IE7, FF3, Op. 9.54, GH).

Автор: Hades 4.9.2008, 19:05
Цитата(SelenIT @  4.9.2008,  18:49 Найти цитируемый пост)
А тогда событие onchange не наступит, и, соответственно, ничего не удалится (проверено в IE7, FF3, Op. 9.54, GH).

но ведь тогда первый пункт окажется выбранным

Автор: SelenIT 4.9.2008, 19:13
Не окажется, а останется ). По общей логике, в этом случае должен сработать и выругаться валидатор формы при попытке ее отправить...

Автор: Hades 4.9.2008, 19:18
Цитата(SelenIT @  4.9.2008,  19:13 Найти цитируемый пост)
в этом случае должен сработать и выругаться валидатор формы при попытке ее отправить

ну и зачем нам тогда что-то удалять

Автор: SelenIT 4.9.2008, 19:32
Логично smile. Может, для наглядности - дескать, что-то выбрать непременно надо (аналог блока радиобаттонов, в котором один непременно должен быть чекнут). Автору виднее... smile

Автор: integral 5.9.2008, 15:54
не, ну предложеный вариант не плох - но особеность OPTGROUP в том, что на него нельзя навести и выбрать. Т.е. в данном решении я навожу мышь на первый вариант и могу его выбрать = просто после выбора он изменится на первый вариант.... нада что-бы как OPTGROUP 
Был предложен интерестный вариант с дивами, но только я не в курсе как это сделатьsmile
Например, как выпадающий список в GMail

Автор: bars80080 5.9.2008, 17:36
написать падающий список дивом и не париться

Автор: ksnk 5.9.2008, 18:30
Простейший, но функциональный вариант. В IE, FF3, GC вроде, исправно работает
Код

жфшьчпц удуыскшкцщепшо og rhopuri orwitg r<br>
жфшьчпц удуыскшкцщепшо og rhopuri orwitg r<br>
жфшьчпц удуыскшкцщепшо og rhopuri orwitg r<br>
жфшьчпц удуыскшкцщепшо og rhopuri orwitg r<br>
жфшьчпц удуыскшкцщепшо og rhopuri orwitg r<br>
жфшьчпц удуыскшкцщепшо og rhopuri orwitg r<br>
Hello!
<span id='select' onmouseover="showit(this)" onmouseout="showit(this,'none')" style="color:red;position:relative;">
  <span>select</span> 
  <div style="border:1px solid gray;  background:white; padding:5px;display:none;position:absolute;left:0;top: 1em;">
     Title<br>
     <a href='#' onclick='return point(this)'>point1</a><br>
     <a href='#' onclick='return point(this)'>point2</a><br>
     <a href='#' onclick='return point(this)'>point3</a><br>
     <a href='#' onclick='return point(this)'>point4</a><br>
     <a href='#' onclick='return point(this)'>point5</a><br>
     <a href='#' onclick='return point(this)'>point6</a><br>
  </div>
</span>
how are you?
жфшьчпц удуыскшкцщепшо og rhopuri orwitg r<br>
жфшьчпц удуыскшкцщепшо og rhopuri orwitg r<br>
жфшьчпц удуыскшкцщепшо og rhopuri orwitg r<br>
жфшьчпц удуыскшкцщепшо og rhopuri orwitg r<br>
жфшьчпц удуыскшкцщепшо og rhopuri orwitg r<br>
жфшьчпц удуыскшкцщепшо og rhopuri orwitg r<br>

<script type="text/javascript">

function showit(el,style){
    var i=el.getElementsByTagName('div')[0];
    i.style.display=style||'';
}

function point(el){
  var i=el.parentNode.parentNode;
// do something
  i.getElementsByTagName('span')[0].innerHTML=el.innerHTML;
  showit(i,'none');
  return false;
}

</script>


Автор: integral 8.9.2008, 10:17
2bars80080
ок, дивом... а как это делается?

Автор: bars80080 8.9.2008, 10:59
вообще-то, ksnk, привёл его пример. причём вполне универсальный

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)