Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Изменить input на select (https://javascript.ru/forum/dom-window/31762-izmenit-input-na-select.html)

fantasy_h1 19.09.2012 23:19

Изменить input на select
 
Код:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">
<script>
function showContent(link) {

var cont = document.getElementById('contentBody');
var loading = document.getElementById('loading');

cont.innerHTML = loading.innerHTML;

var http = createRequestObject();
if( http ) {
http.open('get', link);       
http.onreadystatechange = function () {
if(http.readyState == 4) {
cont.innerHTML = http.responseText;
}
}
http.send(null);   
} else {
document.location = link;
}
}

function createRequestObject() {
try { return new XMLHttpRequest() }
catch(e) {
try { return new ActiveXObject('Msxml2.XMLHTTP') }
catch(e) {
try { return new ActiveXObject('Microsoft.XMLHTTP') }
catch(e) { return null; }
}
}
}
</script>
</head>

<body>

<p>Вопрос?</p>

<form>
<input onclick="showContent('/xxxx.html')" type="button" value="Вариант 1"> <input onclick="showContent('zzzz.html')" type="button" value="Вариант 2">
</form>

<div id="contentBody">
</div>

<div id="loading" style="display: none">
Идет загрузка...
</div>

</body>
</html>

Скрипт выдает 2 кнопки и подгрузку страницы через ajax по выбору кнопки
Как изменить этот скрипт под окно выбора select вместо кнопок?

devote 20.09.2012 01:04

<script type="text/javascript">
function selChange( self ) {
    var links = ['',
      '/xxxx.html',
      'zzzz.html'
    ];
    if ( links[ self.value ] ) {
        showContent( links[ self.value ] );
    }
}
</script>
<select onchange="selChange( this )">
    <option value="0"> - выберите вариант - </option>
    <option value="1">вариант 1</option>
    <option value="2">вариант 2</option>
</select>

fantasy_h1 20.09.2012 08:02

что-то не хочет он показывать заданные страницы)

lord2kim 20.09.2012 08:45

fantasy_h1, все работает
вы случайно не удалили остальные функции?
покажите ваш код...

fantasy_h1 20.09.2012 13:38

что-то я не то почистил кажеться, как правильно вставить код?

lord2kim 20.09.2012 14:59

fantasy_h1,
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">
<script>
function showContent(link) {

var cont = document.getElementById('contentBody');
var loading = document.getElementById('loading');

cont.innerHTML = loading.innerHTML;

var http = createRequestObject();
if( http ) {
http.open('get', link);	
http.onreadystatechange = function () {
if(http.readyState == 4) {
cont.innerHTML = http.responseText;
}
}
http.send(null);    
} else {
document.location = link;
}
}

function createRequestObject() {
try { return new XMLHttpRequest() }
catch(e) {
try { return new ActiveXObject('Msxml2.XMLHTTP') }
catch(e) {
try { return new ActiveXObject('Microsoft.XMLHTTP') }
catch(e) { return null; }
}
}
}

function selChange( self ) {
    var links = ['',
      '/xxxx.html',
      'zzzz.html'
    ];
    if ( links[ self.value ] ) {
        showContent( links[ self.value ] );
    }
}
</script>
</head>

<body>

<p>Вопрос?</p>

<select onchange="selChange( this )">
    <option value="0"> - выберите вариант - </option>
    <option value="1">вариант 1</option>
    <option value="2">вариант 2</option>
</select>

<div id="contentBody">
</div>

<div id="loading" style="display: none">
Идет загрузка...
</div>

</body>
</html>

fantasy_h1 20.09.2012 15:49

Большое спасибо, все прекрасно работает:)


Часовой пояс GMT +3, время: 23:20.