克隆選擇 <option>更改第一個選擇值

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/