Shahzad Ditro Shahzad Ditro - 1 month ago 8
Javascript Question

How to delete the selected option using title attribute of select tag

I want to delete the first option of the selected and I have selected tag id and class but the problem is selected class and id is changing when I open the form of different-2 event.and class "r" of selected tag is using more than one time different-3 drop down of form.

I want to remove the selected option using title attribute of selected tag.

If any other way to resolved this type of problem please share.

<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option value="">Select One </option>
<option value="Michigan"> Michigan</option>
<option value="Alabama"> Alabama</option>
<option value="Alaska"> Alaska</option>
<option value="Arizona"> Arizona</option>
<option value="Arkansas"> Arkansas</option>
<option value="California"> California</option>
<option value="Colorado"> Colorado</option>
<option value="Connecticut"> Connecticut</option>
<option value="Delaware"> Delaware</option>
<option value="Florida"> Florida</option>
<option value="Georgia"> Georgia</option>
</select>


I want to delete

<option value="">Select One </option>

Answer

Here is how to select using class and title in plain JavaScript

window.onload=function() {
  var sel = document.querySelector("select.r[title='State*']");
  console.log(sel);
  sel.options[0]=null;
}
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
  <option>Please select State</option>  
  <option>option 1</option>
</select>  
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="NotState*">
  <option>Please select Not State</option>  
  <option>option 1</option>
</select>  

Ditto in jQuery

$(function() {
  var $options = $("select.r[title='State*'] option");
  $options.eq(0).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
  <option>Please select State</option>  
  <option>option 1</option>
</select>  
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="NotState*">
  <option>Please select Not State</option>  
  <option>option 1</option>
</select>