Question

我目前有一个像以下的超文本选择箱。

<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>。

Imagine there is 3x different select boxes called item_1, item_2 and item_3.
Imagine a div (or a table) on any place of current document.
Whenever the value on select box changes, the div should contain a link to picture with option value.

例如,如果“Value (2)”在“项目1”选择箱中选取,就应在零件上打印2jpg。如果其他选箱中有某些价值,也应当印刷其形象。

Example: item_1 -> Value (2) -- item_2 -> Value (3) -- Output -> < img src="2.jpg">, < img src=3.jpg">

我如何能够这样做?

<>B>。

除上述问题外,我们不会根据某些箱子价值直接印刷图像,而是将非洲宇宙航空研究开发机构的请求提交给我们的项目组合。 PHP将归还关于选定箱价值的补充资料。 (例如,如果你选择了“价值2”,则可从数据库中获取价格、存量/面值或照片。)

Depending on the returned values, we will get image_path value from database so instead of printing 2.jpg, it may print my_cute_dog.jpg.

我如何能够这样做? I ll be glad if you can guide me.

Thank you, Anil

Ps. 无需配制PHP。仅向我提供PHP的名称、参数和方法。 (POST更喜欢)。我只需要一些基本的帮助或指导。

第2页,你可以指你希望的四分之四。

Answer 1

问题首先容易。属于你下级名单的变动情况。之后,取用了新选用的价值。

You can then modify the src attribute of an existing image to be the new value. Note that I use prop here because I am in jQuery 1.7+. If you are not using newer jQuery then use attr instead.

最后,日本宇宙航空研究开发机构的一些方法被 co为 j。我选择了<代码><>load/code>,但你可以使用像<编码>get或ajax/code>等更为复杂的东西,对返还数值进行更细微的控制。 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);

});

Answer 2

I highly recommend you to use jQuery. Lets assume this is your 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>

<><>A>:

$(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. );
    });

});

B Yes you should use PHP or any other server side language. But I have a little suggestion / question?

Depending on the returned values, we will get image_path value from database so instead of printing 2.jpg, it may print my_cute_dog.jpg.

你们不需要再用别的网址来获取图像,只字面写在PHP中,将JSON编码数据退回到 j。就本案而言,我建议你增加纽芬兰语,但这是任择的。请允许我在文件中添加一些法典。准备就绪

$( #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.
      });
});

友情链接