使用JavaScript从下拉列表中获取选项标题

Question

I got a dynamic input form from a dropdown list. Here's my code for the dropdown

<label class="strong">Cut: 
<select name="add_qty">
<?php
    $qqs = mysqli_query($conn, "SELECT * FROM m_maincut WHERE maincut_status = '1'");
    while($roq = mysqli_fetch_array($qqs, MYSQLI_ASSOC))
    {
?>
        <option id="opsi" value="<?php echo $roq['maincut_id']; ?>" title="<?php echo $roq['maincut_name']; ?>"><?php echo $roq['maincut_name']; ?></option>
<?php
    }
?>
</select>
</label> 
Total: <input type="text" name="add_name" /> 
<input onclick="addRow(this.form);" type="button" value="Add New" />

and here's my javascript to make the form dynamic (click button for add more option)

<script type="text/javascript">
var rowNum = 0;

function addRow(frm) {
    rowNum++;
    var text = frm.opsi.title;
    var row = '<p id="rowNum' + rowNum + '">Nama Biaya: <option type="text" name="qty[]" size="4" value="' + frm.add_qty.value + '">' + text + '</option> Jumlah: <input type="text" name="name[]" value="' + frm.add_name.value + '"> <input type="button" value="Remove" onclick="removeRow(' + rowNum + ');"></p>';
    jQuery('#itemRows').append(row);
    frm.add_qty.value = '';
    frm.add_name.value = '';
}

function removeRow(rnum) {
    jQuery('#rowNum' + rnum).remove();
}
</script>

Here's my result:

"Tambah ke Biaya" means "Add More"

My question is , how to get the title of the option? I can get the value, but I can get the title to show up to client. Because if I show the value, it will show only number (the ID's)

Answer 1

You have to get innerHTML of the option tag if you want to get which is shown to the user. And you must create an option instead ap element

Answer 2

To get the title attribute of tag,

var title = jQuery(this).attr('title');

To get html inside <option> ,

var html = jQuery(this).html();

And suggest you to use jQuery, it will be easier

<input id="add_new" type="button" value="Add New" />

and trigger click event of this button like,

jQuery('#add_new').click(function(){
    // your process
});

Answer 3

如果您确实在寻找标题的值，因为title是元素的属性之一，那么您应该可以使用

jQuery('your-selector').attr('title');