Помогите скорректировать скрипт
Есть такой скрипт
<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 последние строчки. Вот с ними у меня не получается. :help: |
<!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>
|
Огромное спасибо! :victory:
Только в результате должен появляться не такой текст,как написано в option, например a2 b3 c1 d4, а определенный текст, соответствующий этим параметрам. Например, если выберут a2 b3 c1 d4, то текст появится: Привет! Если выберут a1 b4 c1 d2, то Прощай! Это условно, на самом деле там будут фреймы. Может быть какие-то идентификаторы поставить, чтобы переводили куда надо, например к какой-то таблице с идентификатором a2 b3 c1 d4, и в ней будут нужные фреймы. Еще раз спасибо :dance: Наверное это совсем элементарно, извините, если что не так. Но у меня не получается. |
В данном случае 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 соответствующие, и если так, не понятно тогда зачем функция, можно просто выбрав в списке нужное и перейти. Если же предварительно нужно вывести нечто, ну так это можно сделать и иначе, и также без функции. |
Проблема решена с помощью rekzi
Оперативно и грамотно. Спасибо! :victory: |
| Часовой пояс GMT +3, время: 03:26. |