Ну мне кажется нельзя повлиять на select (display:none) при клике на которую он как раз и раскрываться, только если напрятать его средствами css.
Я буду делать дивами в которые вложу список LI который уберу в display:none и он будет подгружаться при событии onFocus и соответственно скрываться |
Цитата:
объясните нам всем неразумным, как раскрыть select по клику на input, средствами css? может я чего недопонял и нужно было это:
<input type="text" id="inpt" onclick="document.getElementById('ku').style.visibility='visible'"><br>
<select multiple size="3" id="ku" style="visibility:hidden;" onclick="document.getElementById('inpt').value=this.options[this.selectedIndex].value;this.style.visibility='hidden'">
<option>одын</option>
<option selected>двысти дваццат восэм</option>
<option>тры</option>
<option>четыреста</option>
<option>чатыреста триццать</option>
</select>
|
Цитата:
|
Сделаю, выложи своё. Правда с дизом, потому что делаю под свой проект. Думаю к субботе закончу. Почему так долго, потому что буду прикручивать ajax+json+php+mysql+....генерация самописного select на основе вводов input.
Ну а общими усилиями поможете оптимизировать код ) |
Цитата:
|
Хм... а вы вообще уверены, что там именно селект?
Походу просто муляж. Цитата:
|
Цитата:
Ну пусть не только css... вот набросал... перед сном))
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title></title>
<style>
input {border: 1px solid #000; width: 300px;}
select {width: 300px; display: none;}
</style>
</head>
<body>
<form>
<input id="put" type="text" onclick="show()" onblur="show()" /><br />
<select size="5" id="inp">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
<script>
function show() {
document.getElementById('inp').style.display = (document.getElementById('inp').style.display == 'block')?'none':'block';
try {document.getElementById('put').value = document.getElementById('inp').options[document.getElementById('inp').selectedIndex].text;} catch(e){}
}
</script>
</body>
</html>
|
Снова поднимаю тему ))
Есть некий input, задача которого принять от пользователя данные. Если данные есть уже в списке, который автоматически раскрывается, то пользователь просто выберет нужную ему категорию и продолжит создание темы. А если название новое и пользователь не нашел нужной ему категории в списке, то список не закрывается при клике на другой участок браузера , как происходит скажем при клике(onBlur).Как мне сделать, чтобы список закрывался при onBlur или другом событии, не могу понять как довести до идеала или что-то похожее было на правду. Так же прошу помощи в исправлениях моих ошибках в коде и оптимизации JS http://lovelife.su/newtime В последствии всё это будет подгужаться с помощь ajax в виде json
// var slovos = new Array();
var s_json = new Array();
var oldValue;
// var reps = new Array();
// var list = new Array();
// var greats = new Array();
var lis_input_catalog = 'Введите название';
var lis_new_catalog = 'Новая категория';
var lis_start = '<div style="margin-top:20px;position:absolute;background-color:#fff;border-bottom:1px solid #cde;border-left:1px solid #cde;border-right:1px solid #cde;">' +
'<div class="result_list result_list_scrollable">' +
'<ul class="list" style="padding: 0px 0px 3px 0px;margin:0px 0px 0px 0px;">' +
'<li onmouseover="this.style.backgroundColor=\'#91abc4\';this.style.color=\'#fff\';"'+
'onmouseout="this.style.backgroundColor=\'#e9e9e9\'; this.style.color=\'#000\';"'+
'onclick="d_list()" id="noin">';
var lis_end = '</lu></div></div>';
s_json['id'] = [ 1, 3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18];
s_json['j'] = ['Крокодил гена','пока','земля','сон','провод',
'магазин','авто','ав','басы','участок',
'перевод','старт','ГИБДД','Пятница','Путин',
'Москва','Санкт-Питербург','клаксон'
];
function activate_select(){
setInterval(function (){
if (document.getElementById('stail').value != oldValue)
{
oldValue = document.getElementById('stail').value;
if(oldValue.length != ''){
// input fool
// функция формирования и проверки массива
document.getElementById('selectwrite').innerHTML = '';
space = search_json(oldValue)
if(space != ''){
document.getElementById('selectwrite').innerHTML = lis_start + lis_new_catalog +'</li>'+ space + lis_end;
}else{
document.getElementById('selectwrite').innerHTML ='';
}
}else{
document.getElementById('selectwrite').innerHTML = '';
space = search_json(oldValue)
document.getElementById('selectwrite').innerHTML = lis_start + lis_input_catalog +'</li>'+ space + lis_end;
}
}
},
10 );
}
// функция для просмотра длины слова
function search_json(slovo)
{
var lis = '';
for(var f = 0; f <= s_json['j'].length; f++)
{
// lis.appendChild(lis);
// document.getElementById('r2').innerHTML = s_json['j'][f];
if( s_json['j'][f] == undefined )
{
}else{
if( slovo.length <= s_json['j'][f].length )
{
if (s_json['j'][f].search(new RegExp( slovo , "gi")) != -1? true : false )
{ // регулярное выражение по поиску совпадений
// регулярное выражение по замене
reps = s_json['j'][f].replace(new RegExp( slovo , "g"), '<em>' + slovo + '</em>') ;
// list['id'] = s_json['id'][f];
lis = lis + '<li onclick="onclick_select_list(\'' + s_json['id'][f] + '\',\'' + s_json['j'][f] + '\')" ' +
'onmouseover="this.style.backgroundColor=\'#6083a5\';this.style.color=\'#fff\';'+
'this.style.borderTop = \'solid #f82525 1px\';this.style.borderBottom = \'solid #f82525 1px\';" '+
'onmouseout="this.style.backgroundColor=\'#fff\'; this.style.color=\'#000\';'+
'this.style.borderTop = \'solid #ffffff 1px\';this.style.borderBottom = \'solid #ffffff 1px\';" value="' + s_json['id'][f] +'">' + reps + '</li>';
}
}
}
}
return lis ;
}
// res(listing);
// проверка
function onclick_select_list(id_value, var_value){
document.getElementById('stail').value = var_value;
document.getElementById('catalog_id').value = id_value;
document.getElementById('selectwrite').innerHTML = '';
}
function onactivate_selec(){
document.getElementById('selectwrite').innerHTML = '';
}
function delete_select_list(){
var selectw = document.getElementById('selectwrite');
if (selectw != ''){
// document.getElementById('selectwrite').innerHTML = '';
}else{
activate_select();
}
}
function d_list(){
document.getElementById('selectwrite').innerHTML = '';
}
<div id="selectinput">
<div style="cursor: pointer; width: 163px;">
<img style="cursor: pointer; width: 9px; height: 20px; border: 1px none; padding: 0px; float: left;" src="/img/left_catalog_theme.gif" alt="|">
<div style="display:inline;float:left;background-image: url('/img/catalog_input.gif');width: 154px; height: 20px;border: 0px; ">
<input onBlur="delete_select_list()" value="" id="stail" onFocus="activate_select()" style="padding: 0px 0px 1px 0px;background-color:#fcfcfc;margin:2px 0px 2px 0px;height: 15px;width: 129px;float: left;border: 0px none;" name="catalog" type="text" size="10">
<input id="catalog_id" value="" style="display:none;" name="catalog_id" type="text">
<div onclick="activate_select()" style="background-repeat: no-repeat;display:inline;float:left;background-image:url('/img/catalog_open_select.gif');width: 25px; height: 20px; ">
</div>
</div>
</div>
</div>
<div id="selectwrite"></div>
Прошу не пинать слишком нагами, так как изучаю JS более недели и то по мере того что необходимо |
| Часовой пояс GMT +3, время: 19:07. |