0

新しいhtml要素を作成した後

$('select#base_element').append('<option value="new_option" id="option_'+id+'">New option</option>');

私はどのように行いますか：

$('#option_'+id).text('new text');

id は、新しいオプションが追加されるたびに更新されるグローバル変数です

以下は、私がやろうとしていることの完全な例です:

<html>
<head>
<script src="jquery.min.js"></script>
<script type="text/javascript">
var id = 0;
function addOption() {
    $('#myselect').append('<option id="option_'+id+'" value="blah">blah '+id+'</option>');
    $('#buttons').append('<input type="button" onclick="changeText('+id+');" value="Change text of option '+id+'" />');
    id += 1;
}

function changeText(target_id) {
        alert('Change Text clicked');
    $('#option_'+id).text('New text for option '+target_id);
}

$(function() {
    addOption();
    addOption();
    addOption();
});
</script>
<head>
<body>
<select id="myselect">

</select>
<div id="buttons"></div>
</body>
</html>
4

4 に答える 4

1

これを試して

html>
<head>
<script src="jquery.min.js"></script>
<script type="text/javascript">
var id = 0;
function addOption() {
    $('#myselect').append('<option id="option_'+id+'" value="blah">blah '+id+'</option>');
    $('#buttons').append('<input type="button" onclick="changeText('+id+');" value="Change text of option '+id+'" />');
    id += 1;
}

function changeText(target_id) {
// the modification is here

      $('select#myselect').find('#option_'+target_id).text('New text for option ');
}

$(function() {
    addOption();
    addOption();
    addOption();
});
</script>
<head>
<body>
<select id="myselect">

</select>
<div id="buttons"></div>
</body>
</html>

JSフィドル

于 2012-09-10T08:08:15.867 に答える
1

このようにしてみてください

$('select #option_'+id).text('New text');  //you can use html in place of text
于 2012-09-10T07:34:11.943 に答える
0

を使用して、要素の内容を好きなように設定できます

$('#option_'+id).html('new text or html');
于 2012-09-10T07:30:00.107 に答える
0

上記の問題の完全なビンを作成しました。以下のようにデモスクリプトのリンクを試してください：

デモ http://codebins.com/bin/4ldqp7g

HTML

<input type="button" id="btnadd" value="Add Option" />
<br/>
<select id="myselect">
</select>
<div id="buttons">
</div>

JQuery

var id = 0;
$(function() {
    $("#btnadd").click(function() {
        addOption();
    });
});

function addOption() {
    id += 1;
    $('#myselect').append('<option id="option_' + id + '" value="blah">blah ' + id + '</option>');
    $('#buttons').append('<input type="button" onclick="changeText(' + id + ');" value="Change text of option ' + id + '" />');
}

function changeText(target_id) {
    // Need to correction is here
    $('#myselect #option_' + target_id).text('New text for option #' + target_id);
    //OR
    // $('#myselect #option_' + target_id).html('New text for option #' + target_id);
}

デモ http://codebins.com/bin/4ldqp7g

于 2012-09-10T09:52:46.987 に答える