Need to add some values to a Dropdown list in a form --

Question

I have a custom list Sections that has values based on a date range. I have a contact list that will be a list of individuals and has a Sections lookup in this custom list. I want the dropdown for the Sections lookup only display those values that are within today's date.

I have code to remove the values (There is probably a better way, I'm walking through them), then I have code that will look up the list and find the appropriate values that are "current".

I don't know how to add these values to the Dropdown. All of my code works, but need the details to add the appropriate values to the dropdown.

<script type="text/javascript">  
$(document).ready(function() {
   //don't exectute any jsom until sp.js file has loaded.          
   SP.SOD.executeFunc('sp.js', 'SP.ClientContext', GetSections);
});

function GetSections()
{
  var dtToday = new Date((new Date()).getFullYear(), (new Date()).getMonth(), (new Date()).getDate() );
  // Remove all values from Section
    $("select[title='Section'] option").each(function(){
        $(this).remove();
    });
   var ctx = new SP.ClientContext.get_current();
   var list = ctx.get_web().get_lists().getByTitle('Sections');
   var camlQuery = new SP.CamlQuery();
   camlQuery.set_viewXml('<View><Query></Query></View>');
   var collListItems = list.getItems(camlQuery)
   ctx.load(collListItems);
   ctx.executeQueryAsync(
        function(){
                        var swListItms = collListItems.getEnumerator();
                        while (swListItms.moveNext())
                        {
                            var swItm = swListItms.get_current();
                            var itmSDt = swItm.get_item("BeginDate");
                            var itmEDt = swItm.get_item("EndDate");
                            var quest = swItm.get_item("Title");
                            if((dtToday >= itmSDt) && (dtToday <= itmEDt))
                            {
                                console.log("yes-"+quest);
                               $("select[title='Section'] option").prepend('<option value="" selected="selected">--select--</option>')
                            } //else {
                                //console.log("no-"+quest);
                            //}
                        }
        },
        function(sender,args){
             console.log("Request Failed."+args.get_message() + "\n" + args.get_stackTrace());
        }
    );

}
</script>

Thank you in advance.

Answer 1

Modify the code snippet as below:

<script type="text/javascript">  
$(document).ready(function() {
   //don't exectute any jsom until sp.js file has loaded.          
   SP.SOD.executeFunc('sp.js', 'SP.ClientContext', GetSections);
});

function GetSections()
{
  var dtToday = new Date((new Date()).getFullYear(), (new Date()).getMonth(), (new Date()).getDate() );
  // Remove all values from Section
    $("select[title='Section'] option").each(function(){
        $(this).remove();

    });
   var ctx = new SP.ClientContext.get_current();
   var list = ctx.get_web().get_lists().getByTitle('Sections');
   var camlQuery = new SP.CamlQuery();
   camlQuery.set_viewXml('<View><Query></Query></View>');
   var collListItems = list.getItems(camlQuery)
   ctx.load(collListItems);
   ctx.executeQueryAsync(
        function(){
                        $("select[title='Section']").prepend('<option value="" selected="selected">--select--</option>')
                        var swListItms = collListItems.getEnumerator();
                        while (swListItms.moveNext())
                        {
                            var swItm = swListItms.get_current();
                            var itmSDt = swItm.get_item("BeginDate");
                            var itmEDt = swItm.get_item("EndDate");
                            var quest = swItm.get_item("Title");

                            if((dtToday >= itmSDt) && (dtToday <= itmEDt))
                            {
                                console.log("yes-"+quest);
                               $("select[title='Section']").append("<option value='"+quest+"'>"+quest+"</option>")
                            } 

                        }
        },
        function(sender,args){
             console.log("Request Failed."+args.get_message() + "\n" + args.get_stackTrace());
        }
    );

}
</script>
<select title="Section"></select>