Форум

Алина7 · #1 (**permalink**) 25.08.2015, 11:41

Есть такой скрипт

<div>
	<form name="menufrm">
		<select name="menu1">
			<option value="">Категория 1</option>
			<option value="a1">a1</option>
			<option value="a2">a2</option>
			<option value="a3">a3</option>
			<option value="a4">a4</option>
		</select> 
		<select name="menu2">
			<option value="">Категория 2</option>
			<option value="b1">b1</option>
			<option value="b2">b2</option>
			<option value="b3">b3</option>
			<option value="b4">b4</option>
		</select> 
		<input type="button" value="Перейти" onclick="combineMenus(this.form, this.form.menu1, this.form.menu2)" />
	</form></div> 
<script language="JavaScript">
//<![CDATA[
<!-- Original: Ronnie T. Moore, Editor -->
<!-- Idea by: Selvi Narayanan -->
 
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! [url]http://javascript.internet.com[/url] -->
 
<!-- Begin
site = "сайт"; // не добавляйте в конце"/" !!!!!
function combineMenus(frm, menu1, menu2) {
with (frm) {
str = menu1.options[menu1.selectedIndex].value;
str += menu2.options[menu2.selectedIndex].value;
url = site + "/" + str + ".html"; 
window.location.href = url;
}
}
// End -->
//]]>
</script>

Надо к нему прикрутить еще 2 категории (2 меню). И сделать вывод общего результата не в отдельную страницу html, а на этой же странице, чтобы внизу появлялся нужный текст.
Я вижу проблему в строчках:

str = menu1.options[menu1.selectedIndex].value;
str += menu2.options[menu2.selectedIndex].value;
url = site + "/" + str + ".html"; 
window.location.href = url;

Надо, конечно, добавить 2 меню.
В последнем куске добавить 2 строчки с str для 3 и 4 меню и как-то изменить 2 последние строчки. Вот с ними у меня не получается.

EmperioAf · #2 (**permalink**) 25.08.2015, 13:33

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ГГ</title>

<style>
*{
    margin:0;
    padding:0;
    outline: 0;
}
.choice {
    width: 100%;
}


input {
    height: 100px;
}

h1 {
    display: inline-block;
}

.result {
    color: red;
    display: inline-block;
}
</style>
</head>
<body>
<div>
    <form name="menufrm">
      <div class="choice">
        <select name="menu1">
            <option value="">Категория 1</option>
            <option value="a1">a1</option>
            <option value="a2">a2</option>
            <option value="a3">a3</option>
            <option value="a4">a4</option>
        </select>
        <select name="menu2">
            <option value="">Категория 2</option>
            <option value="b1">b1</option>
            <option value="b2">b2</option>
            <option value="b3">b3</option>
            <option value="b4">b4</option>
        </select>
        <select name="menu3">
            <option value="">Категория 3</option>
            <option value="c1">c1</option>
            <option value="c2">c2</option>
            <option value="c3">c3</option>
            <option value="c4">c4</option>
        </select>
        <select name="menu4">
            <option value="">Категория 4</option>
            <option value="d1">d1</option>
            <option value="d2">d2</option>
            <option value="d3">d3</option>
            <option value="d4">d4</option>
        </select>
        <input type="button" value="Перейти" onclick="combineMenus(this.form, this.form.menu1, this.form.menu2,this.form.menu3,this.form.menu4)" />
      </div>
        <h1>Результат:</h1>
        <h2 class="result"></h2>
    </form></div>
<script language="JavaScript">
//<![CDATA[
<!-- Original: Ronnie T. Moore, Editor -->
<!-- Idea by: Selvi Narayanan -->
  
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! [url]http://javascript.internet.com[/url] -->
  
<!-- Begin

function combineMenus(frm, menu1, menu2, menu3, menu4) {
with (frm) {
str = menu1.options[menu1.selectedIndex].value+" ";
str += menu2.options[menu2.selectedIndex].value+" ";
str += menu3.options[menu3.selectedIndex].value+" ";
str += menu4.options[menu4.selectedIndex].value+" ";
document.querySelector('.result').innerHTML = str;
}
}
// End -->
//]]>
</script>

</body>

</html>

Алина7 · #3 (**permalink**) 25.08.2015, 13:45

Огромное спасибо!

Только в результате должен появляться не такой текст,как написано в option, например a2 b3 c1 d4, а определенный текст, соответствующий этим параметрам.
Например, если выберут a2 b3 c1 d4, то текст появится: Привет!
Если выберут a1 b4 c1 d2, то Прощай!
Это условно, на самом деле там будут фреймы.
Может быть какие-то идентификаторы поставить, чтобы переводили куда надо, например к какой-то таблице с идентификатором a2 b3 c1 d4, и в ней будут нужные фреймы.
Еще раз спасибо

Наверное это совсем элементарно, извините, если что не так. Но у меня не получается.

laimas · #4 (**permalink**) 25.08.2015, 17:10

В данном случае with не к чему, как и не нужно menu1.options[menu1.selectedIndex].value, ибо свойство value списка и возвращает значение выбранной его опции. Как и не стоит передавать аргументами весь набор списков формы, иначе при добавлении еще списков придется все время править код. Лучше так:

... onclick="combineMenus(this.form)" //то есть передаем в функцию только форму
//а в функции
function combineMenus(f) {
    var n = f.querySelectorAll('select'), r = f.querySelector('.result'), i, s = '';
    for(i=0; i < n.length; i++) {
       s += n[i].value + '<br>'
    }
    r.innerHTML = s
}

А вот нужно ли выводить эти значения, или нет, идентификаторы чего либо должны быть в значениях опций, это скорее вопрос к вам. Если судить по значению кнопки "Перейти", то возможно значениями должны быть url соответствующие, и если так, не понятно тогда зачем функция, можно просто выбрав в списке нужное и перейти. Если же предварительно нужно вывести нечто, ну так это можно сделать и иначе, и также без функции.

Алина7 · #5 (**permalink**) 27.08.2015, 18:01

Проблема решена с помощью rekzi
Оперативно и грамотно. Спасибо!

Форум

Справочник

Discord чат

Курсы javascript