В моей форме есть раскрывающийся список (был предоставлен код), и когда выбран второй вариант (of2) в раскрывающемся списке, некоторые элементы формы изменяются.Все работает нормально.
То, что я хочу сделать, - это вместо этого переключить раскрывающийся список на две радиокнопки.
При выборе второй радиокнопки происходят изменения формыпо умолчанию первый выбирается в основном при загрузке страницы).
Это код формы для раскрывающегося списка:
<form id="propsearch_res" name="propsearch_res" method="post">
<select name="sales_rental" id="sales_rental" onChange="onChange(this.form)">
<option value="S" selected="selected">Properties For Sale</option>
<option value="L">Properties To Let</option>
</select>
...
, и этотекущий javascript, который обеспечивает изменение (и остальную часть формы):
<script type="text/javascript">
function nongeosearch() {
document.form1.xstyle.value = "7";
}
function onChange(obj) {
var Current = obj.sales_rental.selectedIndex;
var n = 1;
obj.price_low.options.length = 0;
obj.price_high.options.length = 0;
if (obj.sales_rental.value == "S")
{
setsel(obj,"Any Price","","0");
setsel(obj,"£30,000","30000",n);n=n+1;
setsel(obj,"£40,000","40000",n);n=n+1;
setsel(obj,"£50,000+","",n);n=n+1;
} else {
setsel(obj,"Any p/month","","0");
setsel(obj,"£300","300",n);n=n+1;
setsel(obj,"£400","400",n);n=n+1;
setsel(obj,"£500+","",n);n=n+1;
}
}
$(document).ready(function() {
onChange(document.propsearch_res);
});
function setsel(obj,val1,val2,n) {
obj.price_low.options[n] = new Option(val1,val2);
obj.price_high.options[n] = new Option(val1,val2);
}
</script>
Это то, что я попробовал с моими двумя переключателями
(Это не сработало,но я думаю, это потому, что что-то нужно настроить в javascript: S)
<input type="radio" id="sales_rental" name="sales_rental" value="S" />
<input type="radio" id="sales_rental" name="sales_rental" value="L" onChange="onChange(this.form)" />
Я также попытался:
<input ...onClick="onChange(this.form)" />
... без успеха.
Любойпомощь будет очень признателен!
Спасибо за чтение
==== Все еще нет радости ... мои переключатели теперь такие:
<input type="radio" name="sales_rental" checked value="S" />
<input type="radio" name="sales_rental" value="L" />
и JS с вашими изменениями (надеюсь, в нужном месте?):
<script type="text/javascript">
function nongeosearch() {
document.form1.xstyle.value = "7";
}
function onChange(obj) {
var n = 1;
obj.price_low.options.length = 0;
obj.price_high.options.length = 0;
if (obj.find("input[name=sales_rental]").val() == "S")
{
setsel(obj,"Any Price","","0");
setsel(obj,"£30,000","30000",n);n=n+1;
setsel(obj,"£40,000","40000",n);n=n+1;
setsel(obj,"£50,000+","",n);n=n+1;
} else {
setsel(obj,"Any p/month","","0");
setsel(obj,"£300","300",n);n=n+1;
setsel(obj,"£400","400",n);n=n+1;
setsel(obj,"£500+","",n);n=n+1;
}
}
$(document).ready(function() {
onChange(document.propsearch_res);
});
function setsel(obj,val1,val2,n) {
obj.price_low.options[n] = new Option(val1,val2);
obj.price_high.options[n] = new Option(val1,val2);
}
</script>
Оригинальный код формы (заменить первыет выпадающих с 2 радио-кнопок)
<form id="propsearch_res" name="propsearch_res" method="post" action="script_search.php">
<fieldset><legend>Property Search Type</legend>
<span><span id="propsearch1">
<label for="sales_rental"><img src="images/ico_search.png" alt="Property Search: Step 1" />Search:</label>
<select name="sales_rental" id="sales_rental" onChange="onChange(this.form)">
<option value="S" selected="selected">Properties For Sale</option>
<option value="L">Properties To Let</option>
</select>
</span></span>
</fieldset>
<p>Filter search by particulars</p>
<fieldset><legend>Search Particulars</legend>
<div id="propsearch2">
<div>
<label for="PropTypwfld"><img class="house" src="images/ico_house.png" alt="Property Search: Step 2" />Search for a:</label>
<select name="type" id="PropTypefld" size="1">
<option value="">Property</option>
<script type="text/javascript" src="http://www.housescape.org.uk/cgi-bin/ptype.pl?ren1"></script>
</select>
</div>
<div>
<label for="area">loacted in:</label>
<select name="area" id="area" size="1">
<option value="">All Areas</option>
<script type="text/javascript" src="http://www.housescape.org.uk/cgi-bin/arealist.pl?ren1"></script>
</select>
</div>
<div>
<label for="Bedroomsfld">with a minimum:</label>
<select name="num_beds" id="Bedroomsfld" size="1">
<option value="1">1 Bedroom</option>
<option value="2">2 Bedrooms</option>
<option value="3">3 Bedrooms</option>
<option value="4">4 Bedrooms</option>
<option value="5">5 Bedrooms</option>
<option value="6">6 Bedrooms</option>
<option value="">No Preference</option>
</select>
</div>
<div>
<label for="price_low">between:</label>
<select name="price_low" id="price_low" size="1"></select>
</div>
<div>
<label for="price_high">and:</label>
<select name="price_high" id="price_high" class="lastinput" size="1"></select>
</div>
</div>
</fieldset>
<fieldset class="controls">
<input name="xstyle" id="xstyle" type="hidden" value="" />
<input name="submit" id="submit" type="submit" onClick="nongeosearch()" value="Search Properties" />
</fieldset>
</form>