.html() 如何仅显示 select 的选定选项？

Question

When i do $("#form").html() my output is;

<select id="Select1" name="Select1">
<option value="Data1">Data1</option>
<option value="Data2">Data2</option>
<option value="Data3">Data3</option>
<option selected="selected" value="Data4">Data4</option>
</select>

But when i call.html() function i want to get only selected option of select like this;

<select id="Select1" name="Select1">
<option selected="selected" value="Data4">Data4</option>
</select>

How can i do it with.html() function?

Answer 1

You can get selected option by using selector :selected : https://learn.jquery.com/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-selected-option/

 let selectedOption = $("#form #Select1 option:selected"); let selectedOptionParent = selectedOption.parent()[0]; let selectedOptionTag = selectedOption[0]; let selectedOptionVal = selectedOption.val(); console.log(selectedOptionParent); console.log(selectedOptionTag); console.log(selectedOptionVal);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="form"> <select id="Select1" name="Select1"> <option value="Data1">Data1</option> <option value="Data2">Data2</option> <option value="Data3">Data3</option> <option selected="selected" value="Data4">Data4</option> </select> </form>