Javascript 有没有办法刷新选择标记的选项
我是新手。 我正在用这些函数编写代码 1添加新产品的表格 2.将此新产品的名称作为选项之一附加到select元素 3.选择新添加的产品名称，将其显示在单独的表单上 我已经有这个工作，但有一个问题。 当我尝试添加一个新产品并从列表中选择这个新添加的产品时，它不会在单独表单的输入框中显示数据 但是当我刷新整个页面时。它工作得很好。除了刷新整个页面，还有其他方法可以让它工作吗 我在想是否可以只刷新select标记 下面是我的代码： 添加新产品表单：Javascript 有没有办法刷新选择标记的选项,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,我是新手。 我正在用这些函数编写代码 1添加新产品的表格 2.将此新产品的名称作为选项之一附加到select元素 3.选择新添加的产品名称，将其显示在单独的表单上 我已经有这个工作，但有一个问题。 当我尝试添加一个新产品并从列表中选择这个新添加的产品时，它不会在单独表单的输入框中显示数据 但是当我刷新整个页面时。它工作得很好。除了刷新整个页面，还有其他方法可以让它工作吗 我在想是否可以只刷新select标记 下面是我的代码： 添加新产品表单： <div id='bgw' style='b
<div id='bgw' style='background:#fff; height:80%; top:7%;left:2%; width:90%;position:absolute;margin;text-align:center;padding:20px; border-radius:10px;'>
<label style='font-size:15px;font-weight:bold;color:#ff6f01;'>Add New Product to List</label><br><br><br>
<table style='margin-left:30px;'>
<tr>
<td><label>Product Name</label></td>
<td><label>Product Category</label></td>
</tr>
<tr>
<td><input type="text" class="input" id="prod_name" style='width:250px;' /></td>
<td>
<select id = "prod_category" style="font-family:verdana; width:250px; height:34px; border: 1px solid #000000;">
<option value="">---</option>
<optgroup label="Apparel">
<option value="Footwear">Footwear</option>
<option value="Underwear">Underwear</option>
<option value="Outerwear">Outerwear</option>
<option value="Cloth">Cloth</option>
<option value="Jewelry">Jewelry</option>
<option value="Headwear">Headwear</option>
<option value="Eyewear">Eyewear</option>
<option value="Legwear">Legwear</option>
<option value="Blanket">Blanket</option>
<option value="Carpet">Carpet</option>
<option value="Sport Series">Sport Series</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td><label>Unit</label></td>
<td><label>PO Number</label></td>
</tr>
<tr>
<td>
<select id="prod_unit" style="width:250px;height:34px;" class="input">
<option value="">---</option>
<option value="Piece/s">Piece/s</option>
<option value="Roll/s">Roll/s</option>
<option value="Set/s">Set/s</option>
<option value="Pair/s">Pair/s</option>
<option value="Box/es">Box/es</option>
</select>
<td><input type="text" class="input" id="prod_po" style="width:250px;"/></td>
</td>
</tr>
<tr>
<td><label>Brand</label></td>
</tr>
<tr>
<td><input type="text" class="input" id="prod_brand" style="width:250px;"/></td>
</tr>
<tr>
<td><label>Color/Material/Finish</label></td>
<td><label>Technical Specifications/Rating</label></td>
</tr>
<tr>
<td><textarea rows="4" cols="40" id='prod_color' style="border:1px solid #000000;" ></textarea></td>
<td><textarea rows="4" cols="40" id='prod_spec' style="border:1px solid #000000;" ></textarea></td>
</tr>
<tr>
<td><label>Shipping Mark</label></td>
</tr>
<tr>
<td><textarea rows="4" cols="40" id='prod_ship' style="border:1px solid #000000;"></textarea></td>
<td>
<input type='button' id='cancel_prod' value='Cancel' style='width:100px;height:30px;border:none;border-radius:5px;background:#ff6f01;color:#fff;font-weight:bold;font-size:14px;cursor:hand;cursor:pointer'>
<input type='button' id='save_prod' value='Save Product' style='width:150px;height:30px;border:none;border-radius:5px;background:#ff6f01;color:#fff;font-weight:bold;font-size:14px;cursor:hand;cursor:pointer'>
</td>
</tr>
</table>
</div>
$.ajax({
url : 'ajaxrequests.php',
type : 'POST',
async : false,
data : {
prodsave : 1,
compid : compid,
pname : prodname,
pcat : prodcat,
punit : produnit,
ppo : prodpo,
pbrand : prodbrand,
pcmf : prodcmf,
ptech : prodtech,
pship : prodship
},
success: function(result){
if (result == 0) {
$('.name_of_product').each(function(){
var new_prod = $('#prod_name').val();
$(this).append('<option value="'+new_prod+ '">'+new_prod+'</option>');
})
alert('New Product details has been saved!');
$('#prod_name').val("");
$('#prod_category').val("");
$('#prod_po').val("");
$('#prod_brand').val("");
$('#prod_unit').val("")
$('#compid').val("");
$('#prod_color').val("");
$('#prod_spec').val("");
$('#prod_ship').val("");
$('#bgw').hide(500);
$('#bgb').hide(500);
}else if(result == 1){
alert('There was a problem saving the product details. Pelase try again later.');
}else if (result == 2) {
alert("Please fill in all fields");
}else if(result == 3){
alert("Product Name already exists! Please press cancel and select from the list or if you are adding a new product, give the product a different name.");
}
}
});
$('#page3_inside').on('change','.name_of_product', function(event){
event.preventDefault();
var prodname = $(this).val();
var cid = $('#compid').val(); // not found this in html
// should use this to find parent for current element,
// and this is the main part(to find only current match element)
var $this = $(this).closest('tr');
$.ajax({
url : 'ajaxrequests.php',
type : 'POST',
datatype : 'JSON',
data : {
psearch : 1,
product : prodname,
compid : cid
},
success : function(show){
// using $this as this would refer to previous context,
// and find the sibling element only
// Here you need to find element to attach the data
// i could't find the match id in your html snippet
// try this first
$this.find('.name_of_product').val(show.plist_name);
$this.find('.product_category').val(show.plist_category);
$this.find('.po').val(show.plist_po);
$this.find('.brand').val(show.plist_brand);
$this.find('.unit').val(show.plist_unit);
}
});
});
任何帮助都将不胜感激。。谢谢您可以使用AJAX进行刷新而无需重新加载。请确保这是可能的：
$('#page3_inside').on('change','.name_of_product', function(event){
event.preventDefault();
var prodname = $(this).val();
var cid = $('#compid').val(); // not found this in html
// should use this to find parent for current element,
// and this is the main part(to find only current match element)
var $this = $(this).closest('tr');
$.ajax({
url : 'ajaxrequests.php',
type : 'POST',
datatype : 'JSON',
data : {
psearch : 1,
product : prodname,
compid : cid
},
success : function(show){
// using $this as this would refer to previous context,
// and find the sibling element only
// Here you need to find element to attach the data
// i could't find the match id in your html snippet
// try this first
$this.find('.name_of_product').val(show.plist_name);
$this.find('.product_category').val(show.plist_category);
$this.find('.po').val(show.plist_po);
$this.find('.brand').val(show.plist_brand);
$this.find('.unit').val(show.plist_unit);
}
});
});