How to Add Multiple Attributes to Option Element

By Posted on

This article is telling on how to add multiple attributes to an ongoing to be created option element. As a matter in fact, any HTML element can be generated by using Javascript for an instance an option HTML element. The option HTML element itself can have one attribute for containing value which is going to used for further processing. The attribute usually called ‘value’. Below is the snippet code of HTML script showing the description given above : 

<div class="form-group">
<label class="col-md-2 control-label">Database (If it is exist) :</label>
<div class="col-md-4">
<select name="databases" id="databases">
<option selected disabled>Choose Database</option>
@foreach($srv['db'] as $db)
<option value="{{$db->id_db}}" version="{{$db->version}}">{{$db->name}} {{$db->version}}</option>
@endforeach
</select>
</div>
</div>

As shown in the above snippet code, there is another attribute defined for the option HTML element. That attribute is ‘version’. The main purpose for adding another attribute to the option HTML element is to be able to define more than one value. In the context of this article, the proper definition for that value is important for further purpose such as printing it in the HTML page.

The scenario for printing the HTML element in the HTML page is actually quite simple. In the above snippet code, the purpose is to show the HTML page which is displaying list of available database. It is converting the option HTML element which stands for every available ‘databases’ which can be chosen.

For every chosen database from the select option, it will then removed the selected option element from the select option and transferred into another HTML element which in this scenario is in the row HTML element. So, those attributes containing values in the option HTML element are needed to construct the row HTML element. Below is the snippet code which is showing the row construction process : 

$("#btn_add_db").click(function () {
db_val = $("#databases option").filter(":selected").val();
db_name = $("#databases option").filter(":selected").text();
db_version = $("#databases option").filter(":selected").attr('version');

value = "<tr id" + db_val + "><td>" + db_name + "</td>" +
"<td>" + db_version + "</td>" +
"<td><input type='button'" +
" class='btn btn-default' onclick='delete_db(" + db_val + ")' value='Delete'></td></tr>";

$("#table-db-content").append(value);
selected_db.push();
});

As shown in the above snippet code, the event triggering the removal process of a selected option HTML element from the select HTML element is the event click of a button with the id of ‘btn_add_db’. The other attribute which is needed to be printed as part of the new row added is the ‘version’ of the database. The version is retrieved fom the attribute defined in the option HTML element.  This is the part which is useful for retrieving the attribute : 

db_version = $("#databases option").filter(":selected").attr('version');

And in the above option HTML element definition, the attribute version is already being defined : 

<option value="{{$db->id_db}}" version="{{$db->version}}">{{$db->name}} {{$db->version}}</option>

So, the value extracted can be printed later to create or to add a new row which is also shown in the above snippet code : 

value = "<tr id" + db_val + "><td>" + db_name + "</td>" + "<td>" + db_version + "</td>" + "<td><input type='button'" + " class='btn btn-default' onclick='delete_db(" + db_val + ")' value='Delete'></td></tr>";

One of the field or the column constructing the row HTML element is taken from the value extracted. And it is retrieved from a variable named  ‘db_version’.

Leave a Reply