Question

这是我克隆选择选项的代码：

var clone = $('#saleTable tbody>tr#saleTR:last').clone(true);
            clone.find("input").val('');
            clone.insertAfter('#saleTable tbody>tr#saleTR:last');

这是我的HTML：

<tr id="saleTR">
  <td>
    <input name="qty[]" type="text" size="5" />
  </td>
  <td> 
    <select name="description[]" onchange="showPrice(this.value)">
      <option value="null">select Item sold</option>
      <?php getSaleItem(); ?>
    </select>
  </td>
  <td>
    <span id="price"></span>
  </td>
  <td>
  </td>
</tr>

我正在使用ajax来显示价格：

function showPrice(str){
    if (str.length==0){ 
        document.getElementById("price").innerHTML="";
        return;
    }
    if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }else{// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            document.getElementById("price").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","getPrice.php?q="+str,true);
    xmlhttp.send();

}

<tr>被克隆得很好但是当选择或更改最后一个克隆的选择选项时，第一个价格是继续改变而不是相应的价格，即第一个原始价格保持变化而不是相应的价格。与选择选项更改一致。

我想要一个特定的选择选项来更新相应的价格。

Answer 1

在你的html中，你可以将这个对象传递给你的ajax函数，而不是你可以使用这个指针来选择相应的价格范围。

这可能适合你

HTML

<tr id="saleTR">
    <td>
        <input name="qty[]" type="text" size="5" />
    </td>
    <td>
        <select name="description[]" onchange="showPrice(this)">
            <option value="null">select Item sold</option>
            <?php getSaleItem(); ?>
        </select>
    </td>
    <td><span id="price"></span>
    </td>
    <td></td>
</tr>

JAVASCRIPT

function showPrice(selectBox) {
    var str = selectBox.value;
    var corSpan=$(selectBox).closest('#saleTR').find('#price');
    if (str.length == 0) {
        corSpan.html() = "";
        return;
    }
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            corSpan.html(xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET", "getPrice.php?q=" + str, true);
    xmlhttp.send();

}

查看类似示例http://jsfiddle.net/Yamw6/

cloned select <option>更改第一个选择值</option>

1 个答案: