Question

我目前有一个HTML选择框，如下所示。

<select name="item_1">
      <option value="0">Choose one...</option>
      <option value="1">Value (1)</option>
      <option value="2">Value (2)</option>
      <option value="3">Value (3)</option>
</select>

我必须做以下事情。无论哪种方式都有效，但如果可能，我想学习两者。

A。

想象一下，有3个不同的选择框叫做item_1，item_2和item_3。
想象一下当前文档任何地方的div（或表格）。
每当选择框上的值发生更改时，div应包含指向带有选项值的图片的链接。

例如，如果在“item_1”选择框中选择了“Value（2）”，那么它应该在div上打印2.jpg。如果其他选择框中有选定值，则还应打印其图像。

实施例： item_1 - ＆gt;价值（2） - item_2 - ＆gt;价值（3） - 输出 - ＆gt; ＆LT; img src =“2.jpg”＆gt;，＆lt; img src = 3.jpg“＆gt;

我该怎么做？

B。

与上述问题相同，除外;而不是根据selectbox值直接打印图片链接，我们将对我们的PHP文件执行AJAX请求。 PHP将在selectbox中返回有关所选值的其他信息。（例如，如果您选择“值2”，它可能会从数据库中获得它的价格，stock_count或picture_path或w / e。）

根据返回的值，我们将从数据库中获取image_path值，而不是打印2.jpg，它可能会打印my_cute_dog.jpg。

我该怎么做？如果你能引导我，我会很高兴的。

谢谢你，阿尼尔

聚苯乙烯。无需编写PHP代码。只需给我PHP文件名，参数和方法。（POST首选）。我只需要一些基本的jQuery / JS帮助或指导。

聚苯乙烯。 2您可以根据需要命名div。

Answer 1

我强烈建议你使用jQuery。让我们假设这是你的HTML。

  <select class="item_1">
     <option value="0">Choose</option>
     <option value="1">Option 1</option>
     <option value="2">Option 2</option>
     <option value="3">Option 3</option>
  </select>
  <select class="item_2">
     <option value="0">Choose</option>
     <option value="1">Option 1</option>
     <option value="2">Option 2</option>
     <option value="3">Option 3</option>
  </select>

答

$(document).ready(function() { // Handler for first select box $('.item_1').change(function() { alert('Handler for item_1 called.'); }); // Handler for second select box $('.item_2').change(function() { alert('Handler for item_2 called.'); }); });

<强>乙是的，您应该使用PHP或任何其他服务器端语言。但我有一点建议/问题？

根据返回的值，我们将从中获取image_path值数据库所以不是打印2.jpg，而是打印my_cute_dog.jpg。

你不需要调用另一个php文件来获取图像路径，只需用PHP编写所有内容并将JSON编码数据返回给javascript。对于这种情况，我建议您添加额外的按钮，但这是可选的。让我们写一些代码在document.ready（）
中添加
$('#get_data').bind('click', function() { // get current values from select boxes. var item_1 = $(".item_1").val(); var item_2 = $(".item_2").val(); //Sending AJAX POST Request. $.post("example.php", { name: "value", name_2: "value_2" }, function(data) { alert(data); // print data | you can use this data. }); });

Answer 2

问题的第一部分很简单。绑定到下拉列表的更改事件。然后访问$(this).val()以获取新选择的值。

然后，您可以将现有图像的src属性修改为新值。请注意，我在这里使用prop，因为我在jQuery 1.7+中。如果您不使用较新的jQuery，请改用attr。

最后，jQuery中有许多AJAX方法。我选择load，但您可以使用更复杂的内容，例如get或ajax，以便对返回值进行更精细的控制。 Load基本上接受服务器返回的任何内容并将其填充到匹配的元素中。

http://jsfiddle.net/LHpJd/

//for select list with id of `select`
$('#select').change( function() {
    var value = $(this).val();
    //directly set value as html
    $('#output').html(value);

    //change image url source
    $('#output img').prop('src', 'http://' + value);

    //change image url source from server (expected return value is something like <img src="" />
    $('#output').load('myfile.php?' + value);

});

根据选择框上的ajax回复获取随机图像？

2 个答案: