Условные выпадающие списки

Мне нужно создать условный набор избранных меню с использованием JavaScript или библиотеки JS без использования базы данных, потому что это только для простого прототипа. Однако я новичок в JS и не смог найти решение.Условные выпадающие списки

Вы можете увидеть не функционирующую визуальную здесь:

http://jsfiddle.net/js_noob/n3Fwg/

Переполнение стека требует, чтобы я отправил код из JSFiddle:

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Two Part Select</title> 
<style> 
    p, select { 
    float: left; 
} 
br { 
    clear: both; 
    margin: 0; 
    padding: 0; 
    height: 0; 
} 
form { 
    margin-top: 0; 
    padding-top: 0; 
} 
</style> 
</head> 

<body> 
<p style="margin-left: 20px;">A</p> 
<p style="margin-left: 50px;">B</p> 
<br> 
<form> 

<select style="float: left;"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option> 
<option>6</option> 
<option>7</option> 
<option>8</option> 
<option>10</option> 
<option>11</option> 
<option>12</option> 
<option>13</option> 
</select> 


<select style="float: left; margin-left: 20px;"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option> 
<option>6</option> 
<option>7</option> 
<option>8</option> 
<option>10</option> 
<option>11</option> 
<option>12</option> 
<option>13</option> 
</select> 

<button style="float: left; margin-left: 20px;">Submit</button> 

</form> 

<br> 

</body> 
</html>

Вот описание необходимой функциональности:

Выберите Меню A имеет номера от 1 до 13, как и Меню B. Они не связаны цепью, но есть условный asp необходимых для них. Например, скажем, в меню А вы выбираете «5», а в меню «В» вы выбираете «7», при подаче мне нужно вытащить файл, уникальный для этой конкретной комбинации, назовем его «57.html» в качестве примера. Или, если в меню «А» выбрано «4», и в меню «В» выбрано «8», он отправит файл «48.html» в submit.

Все онлайн демо-версии двух отдельных меню, работающих вместе, что я нашел, кажется, прикован меню, где второе меню заселенных после выбора что-то в первом, и это не то, что я хочу. Например:

http://javascript.about.com/library/bldydrop1.htm

В моем случае, два должны работать вместе, но номера Меню B всегда должны быть видны и будет ссылаться на числовой выборе в меню A вызвать соответствующий файл.

Мое описание имеет смысл? Я не уверен, что это будет вызвано, но я искал решение за последние несколько дней и не нашел точно, что я ищу. Если у кого-то есть какие-либо предложения или замечания, чтобы указать мне в правильном направлении, они были бы очень оценены.

Спасибо!

источник

2013-10-05 JS_Noob

_ "Переполнение стека требует, чтобы я отправил код из JSFiddle" _ - Действительно это делает, и по уважительным причинам. – nnnnnn

То, что вы просите, не имеет ничего общего с «цепочкой» или «условностями». все, что вы делаете, заключается в том, что когда вы отправляете, вы смотрите на значение каждого из двух вариантов, объединяете их, вставляете «.html» в конец, а затем продолжаете.

С тех пор как вы сказали, что вы новичок в JS, вот задокументированная скрипка, в которой используется jQuery (что сделает вашу жизнь намного проще). http://jsfiddle.net/manishie/vPJ9B/

Revised HTML (я добавил идентификаторы для двух элементов):

<select id="select1" style="float: left;"> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
    <option>6</option> 
    <option>7</option> 
    <option>8</option> 
    <option>10</option> 
    <option>11</option> 
    <option>12</option> 
    <option>13</option> 
</select> 
<select id="select2" style="float: left; margin-left: 20px;"> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
    <option>6</option> 
    <option>7</option> 
    <option>8</option> 
    <option>10</option> 
    <option>11</option> 
    <option>12</option> 
    <option>13</option> 
</select>

Javascript:

// tell jquery to wait until the document has loaded 
$(function() { 

    // setup an event handler to respond to the submit event 
    $('button').click(function (event) { 

     //combine the two values 
     alert($('#select1').val() + $('#select2').val() + '.html'); 

     // for the purposes of this demo, disable the actual submit 
     event.preventDefault(); 
    }); 
});

источник

2013-10-05 06:24:27 manishie

Большое спасибо за объяснение требования и за предоставление ответа с помощью jQuery, manishie. Это невероятно полезно! –

Без проблем! Я когда-то был noob, и пользователи StackOverflow мне очень помогли ... – manishie

Условные выпадающие списки

ответ

Смежные вопросы