HTML SelectBox view Salesforce Object data

Question

I am new to SalesForce and am using HTML for VisualForce pages, since it's more flexible to design pages than Apex.

Now I have been stuck at inputting SalesForce Object Data into HTML SelectBox with id "Lop".

This is my VisualForce code, this is where I am using HTML and CSS for design:

<apex:page docType="html-5.0" controller="ThemMoiController">
    <!-- CSS -->
    <style>
        table{
            border:1px solid black;
        }
        td{
            text-align: middle
        }
        #NgaySinh, #ThemMoi{
            box-sizing: border-box;
            min-width: 10px;
            max-width: 100%;
            width: 100%;
        }
    </style>
    
    <!-- HTML -->
    <table>
        <tr>
            <td>
                <u>Quay lại</u>
            </td>
        </tr>
        <tr/>
        <tr>
            <td/>
            <td>Họ</td>
            <td>
                <input id="Ho" type="text" value="{!hoVal}"/>
            </td>
        </tr>
        <tr>
            <td/>
            <td>Tên</td>
            <td>
                <input id="Ten" type="text" value="{!tenVal}"/>
            </td>
        </tr>
        <tr>
            <td/>
            <td>Giới tính</td>
            <td>
                <input id="GioiTinh" type="checkbox" value="{!gioitinhVal}"/>
            </td>
        </tr>
        <tr>
            <td/>
            <td>Ngày sinh</td>
            <td>
                <input id="NgaySinh" type="date" value="{!ngaysinhVal}"/>
            </td>
        </tr>
        <tr>
            <td/>
            <td>Điểm 1</td>
            <td>
                <input id="Diem1" type="text" value="{!diem1Val}"/>
            </td>
        </tr>
        <tr>
            <td/>
            <td>Điểm 2</td>
            <td>
                <input id="Diem2" type="text" value="{!diem2Val}"/>
            </td>
        </tr>
        <tr>
            <td/>
            <td>Điểm 3</td>
            <td>
                <input id="Diem3" type="text" value="{!diem3Val}"/>
            </td>
        </tr>
        <tr>
            <td/>
            <td>Lớp</td>
            <td>
                <select id="Lop"/>
            </td>
        </tr>
        <tr/><tr/>
        <tr>
            <td/><td/>
            <td>
                <button id="ThemMoi" type="button">Thêm mới</button>
            </td>
        </tr>
    </table>
</apex:page>

and this is my Controller Apex code:

public class ThemMoiController {
    public string hoVal { get; set; }
    public string tenVal { get; set; }
    public boolean gioitinhVal { get; set; }
    public date ngaysinhVal { get; set; }
    public double diem1Val { get; set; }
    public double diem2Val { get; set; }
    public double diem3Val { get; set; }
    
    public void doInsert(){
        HOCSINH__c hs = new HOCSINH__c();
        hs.HO__c = hoVal;
    }
}

Really appreciate for your help.

Answer 1

you can create a variable which will be a list of lop sobject.

then in constructor fetch all the records of lop object that you want to show in select dropdown list using soql query and assign the result of soql query to above mentioned variable which is list of lop sobject.

then create getter method as mentioned below that will return list of selectOption class. put the dropdown values in the list of selectOption variable from the list of lop variable.

public List<SelectOption> getItems() {
     List<SelectOption> options = new List<SelectOption>();
     options.add(new SelectOption('US','US'));
     options.add(new SelectOption('CANADA','Canada'));
     options.add(new SelectOption('MEXICO','Mexico'));
     return options;
 } 

use the below code to implement select functionality on VF Page.

<apex:form>
        <apex:selectList value="{!variableToStoreSelectedValue}" multiselect="true">
            <apex:selectOptions value="{!items}"/>
        </apex:selectList><p/>
</apex:form>

go to the doc link for more details : https://developer.salesforce.com/docs/atlas.en-us.234.0.pages.meta/pages/pages_compref_selectList.htm