jQuery: помощь с формой

ProgramBox

jQuery: помощь с формой

Post author:admin
Запись опубликована:30 апреля, 2023
Post category:Вопросы по программированию

#jquery

Вопрос:

Вот что у меня есть:

 <select id="barrelSelect">
<option value="barrelDefaultOption">-- Choose --</option>
 <option value="blackBarrel" rel="10">Black Barrel</option>
 <option value="blueBarrel" rel="25">Blue Barrel</option>
 <option value="greenBarrel" rel="30">Green Barrel</option>
</select>
<select id="slideSelect">
<option value="slideDefaultOption">-- Choose --</option>
 <option value="blueSlide" rel="15">Blue Slide</option>
 <option value="blackSlide" rel="45">Black Slide</option>
 <option value="greenSlide" rel="50">Green Slide</option>
</select>
<p>$ <span id="output"></span> </p>

<script>
function onSelectChange(){
var total = 0,
    barrel = $("#barrelSelect").find('option:selected'),
    slide = $("#slideSelect").find('option:selected');

if(value = barrel.attr('rel')){
    total  = parseInt(value);
}

if(value = slide.attr('rel')){
    total  = parseInt(value);
}

$("#output").html(total);


}

$("#barrelSelect").change(onSelectChange);
$("#slideSelect").change(onSelectChange);
</script>

Можно посмотреть здесь:http://jsfiddle.net/A5VEv/1 /

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

Например:

  <div id="defaultImage"><img src="default.jpg" /></div>

Итак, как я могу изменить код, чтобы, когда пользователь выбирает «blue barrel», изображение по умолчанию менялось на bluebarrel.jpg ?

Кроме того, хочу отдать должное http://jsfiddle.net/mekwall/TJcP4/1 для исходного кода меню выбора.

1. Я не знаю, заметил ли кто-нибудь, но у вас действительно должно быть два знака равенства при сравнении, иначе вы просто присваиваете значения в своих операторах if.

2. Вы имеете в виду, что у if(value = barrel.attr('rel')){ total = parseInt(value); должно быть два знака равенства?

Ответ №1:

У вас должен быть какой-то способ сопоставить значения параметра select с именами изображений. если вы скажете, что названия изображений всегда будут строчными значениями выбранной опции и всегда в формате jpeg, вы могли бы легко сделать:

 $('#defaultImage img').attr('src', dermal.val().toLowerCase()   '.jpg');

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

1. Круто, что это сработает. Могу я спросить, почему это должно быть сделано в нижнем регистре?

2. Кроме того, мне просто добавить это в конец скрипта?

3. Только для соответствия имени вашего примера изображения .. хех. Это не обязательно должно быть в нижнем регистре, оно просто должно соответствовать вашему шаблону именования изображений (:

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

5. @NewToCode — в любом месте вашей onSelectChange функции

Ответ №2:

Самый быстрый способ изменить изображение — это немного использовать jquery, примерно так

 $('#defaultImage img').attr('src', 'newImageLocation.jpg')

Ответ №3:

Вы не указали, как будет получено имя изображения, но предполагая, что это будет значение, за которым option следует .png , вы могли бы сделать это, как показано в this fiddle : http://jsfiddle.net/nogoodatcoding/A5VEv/4 /

Строка jQuery, стоящая за этим, просто:

 $('#defaultImage img').attr('src', barrel.val()   '.png');

Также обратите внимание, что вы можете упростить свой код, чтобы текущая выбранная опция была просто:

 barrel = $('#barrelSelect :selected'),
slide = $('#slideSelect :selected');

1. Спасибо. Это работает, но когда я пытаюсь, и код для 2-го варианта ломается, и работают только 2-е варианты.

2. $(‘#Изображение по умолчанию’).attr(‘src’, slide.val() ‘.png’);

3. @NewToCode Ваш JS просто великолепен. Я думал, вы хотите, чтобы изображение менялось при barrel изменении выбора. Возможно, вы могли бы обновить свой fiddle последним кодом, который не работает.

4. Извините, то, что я пытался сделать, это добавить код, чтобы изображение с любым выбранным параметром менялось.

5. Хорошо, итак, что вы пытаетесь сделать, это установить для изображения в том же div значение, выбранное на основе последнего выбранного параметра? В таком случае проверьте jsfiddle.net/nogoodatcoding/A5VEv/5 — идея состоит в том, чтобы использовать $(this) для определения того, что select было изменено, и использовать его текущее выбранное значение для установки изображения — это то, что вы хотели?

Ответ №4:

Назовите свои изображения «optionValue.jpg «, и сделайте это :

 $(document).ready(function() {
  $('#barrelSelect').change(function(){
    $('#barrelImage').attr('src', 'path/to/'   $(this).val()   '.jpg');
  });
});

Где #barrelImg — это тег img для вашего бочонка