我正在尝试获取具有特定id的元素的类,如下所示。我将有多个字段使用“添加新”选项生成两个下拉列表,但选项的类别不同,第一种情况下为“animal_species”,第二种情况下为“animal_condition”。在下拉列表中选择“添加新项”时,会弹出一个模式窗口,其中包含一个文本字段,可在其中输入下拉列表的新选项。这是模态窗口:
<!-- add-new field -->
<div class="modal small hide fade" id="add-new" tabindex="-1" role="dialog" aria-labelledby="add-new-fieldLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">√ó</button>
<h3 id="add-new-fieldLabel">Add New Field</h3>
</div>
<div class="modal-body">
<p>Would you like to add a new item?</p>
<input type="text" id="add-new-text" name="add-new-text" placeholder="Type the new option">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="add-new-submit" name="add-new-submit"/>Add</button>
</div>
</div><!-- /add-new field -->
文本字段的jQuery是
$('#upload_form option[value="addnew"]').click(function(){
// Show modal window
$('#add-new').modal('show');
$('#add-new-submit').on('click', function(){
// Get new option from text field
var value = $('#add-new-text').val();
console.log(value);
// Get the class
//var Classofentry = $('#upload_form option[class]').attr("class");
var Classofentry = $('#upload_form option[class]').attr("class");
console.log(Classofentry);
$.ajax({
type: "POST",
url: "<?php echo site_url(); ?>main/change_options",
data: {new_option: value, new_option_class: Classofentry},
dataType: "html",
error: errorHandler,
success: success
});
function success(data){
//$('#animal_species').append("<option value='" + data + "'selected=\"selected\">" + data + "</option>"); // This might work ...
$('#'+Classofentry).append("<option value='" + data + "'selected=\"selected\">" + data + "</option>"); // This might work ...
alert(data);
//alert('Success!');
}
function errorHandler(){
alert('Error with AJAX!');
}
$('#add-new').modal('toggle');
});
});
</script>
除了现在已经添加了第二个“动物条件”元素之外,其中的效果非常好,在模态中输入的文本被放入第一个(“动物种类”)元素,因为“Classofentry”始终是“animal_species”而不是产生模态的元素的类。如何在jQuery中访问该类?或者我可能需要针对多个字段的不同实现?一直在尝试无数的东西,但没有任何东西落到实处。救命啊!
以下是我如何使用它(感谢评论!):
<script type="text/javascript">
$('#upload_form option[value="addnew"]').click(function(){
// Show modal window
$('#add-new').modal('show');
// Get the class
//var Classofentry = $('#upload_form option[class]').attr("class");
var Classofentry = $(this).attr("class");
console.log(Classofentry);
$('#add-new-submit').on('click', function(){
// Get new option from text field
var value = $('#add-new-text').val();
console.log(value);
$.ajax({
type: "POST",
url: "<?php echo site_url(); ?>main/change_options",
data: {new_option: value, new_option_class: Classofentry},
dataType: "html",
error: errorHandler,
success: success
});
function success(data){
//$('#animal_species').append("<option value='" + data + "'selected=\"selected\">" + data + "</option>"); // This might work ...
$('#'+Classofentry).append("<option value='" + data + "'selected=\"selected\">" + data + "</option>"); // This might work ...
alert(data);
//alert('Success!');
}
function errorHandler(){
alert('Error with AJAX!');
}
$('#add-new').modal('toggle');
});
});
</script>
我将$(this)元素移动到访问所选选项。