Как вы ссылаетесь на документ, выбранный в операторе выбора HTML?

Question

У меня есть список документов, которые можно выбрать из списка (см. HTML ниже). Есть ли способ ссылки на выбранный документ при нажатии кнопки «Просмотр»? Признаюсь, я новичок в кодировании HTML. Заранее благодарим за любые предложения, которые вы можете предоставить.

<form name="frmDocs" method="post">
   <select name=docs style='width:auto'>
       <option value="1">Document 1</option>
       <option value="2">Document 2</option>
       <option value="3">Document 3</option>
       <option value="4">Document 4</option>                    
       <option value="5">Document 5</option>
   </select>
   <input value="View" type=submit>
</form>

Answer 1

Вы можете сделать это на стороне клиента, используя JavaScript, или на стороне сервера, используя предпочитаемый язык сценариев. Поскольку в вашем вопросе не указан тип используемого вами сервера, я дам ответ на стороне клиента.

Кроме того, если вы еще не обнаружили jQuery , вы определенно захотите. Взгляните на руководство по началу работы .

Использование jQuery:

$('form[name=frmDocs] input[type=submit]').click(funciton() {
    location.assign($('form[name=frmDocs] select[name=docs]').val());
});

Вам также необходимо изменить value каждого элемента select на URL-адрес, на который вы хотите перенаправить.

Если вы назначите идентификаторы вашим элементам HTML ...

<form name="frmDocs" method="post">
   <select id="docs" name="docs" style="width:auto">
       <option value="page1.html">Document 1</option>
       <option value="page2.html">Document 2</option>
       <option value="page3.html">Document 3</option>
       <option value="page4.html">Document 4</option>                    
       <option value="page5.html">Document 5</option>
   </select>
   <input id="submit" value="View" type="submit">
</form>

... тогда ваш код станет проще: (поскольку id должен быть уникальным, тогда как name s не обязательно уникален)

$('#submit').click(funciton() {
    location.assign($('#docs').val());
});

Answer 2

Я получил страницу, работающую с использованием метода обратной передачи HTML, используя код, подобный приведенному выше ответу:

Если вы присваиваете идентификаторы своим элементам HTML ...

Документ 1 Документ 2 Документ 3 Документ 4 Документ 5

Мне нужно будет изучить некоторые другие варианты, показанные с использованием Java или PHP. Есть чему поучиться. Еще раз спасибо за все ваши ответы и помощь !!! Очень ценится.

Answer 3

С PHP:

<?php
    $docs = (isset($_POST['docs']) && is_numeric($_POST['docs'])) ? (int)$_POST['docs'] : 0;

    $pages = array(
        '0' => 'index.html',
        '1' => 'page1.html',
        '2' => 'page2.html',
        '3' => 'page3.html',
        '4' => 'page4.html',
        '5' => 'page5.html'
    );

    if (in_array($docs, $pages)) { header('Location: ' . $pages[$docs]); }
?>

Answer 4

Очевидно, что вы можете ссылаться на документы, перечисляя их в виде списка ссылок, а не поля формы:

<ul>
    <li><a href="URL_OF_DOCUMENT_1"></a>Document 1</li>
    <li><a href="URL_OF_DOCUMENT_2"></a>Document 2</li>
    <li><a href="URL_OF_DOCUMENT_3"></a>Document 3</li>
    <li><a href="URL_OF_DOCUMENT_4"></a>Document 4</li>
    <li><a href="URL_OF_DOCUMENT_5"></a>Document 5</li>
</ul>

Однако для описанной вами функциональности вам потребуется:

1) серверный скрипт, который перенаправляет пользователя на URL выбранного документа при отправке формы; или

2) некоторый JavaScript, который изменяет URL-адрес окна браузера на URL выбранного документа при отправке формы (см., Например, ответ Джоша ).