'HTML select options from a python list

I'm writing a python cgi script to setup a Hadoop cluster. I want to create an HTML select dropdown where the options are taken from a python list. Is this possible?? I've looked around a lot. Couldn't find any proper answer to this.

This is what i've found so far on another thread...

def makeSelect(name,values):
    SEL = '<select name="{0}">\n{1}</select>\n'
    OPT = '<option value="{0}">{0}</option>\n'
    return SEL.format(name, ''.join(OPT.format(v) for v in values))

I really need some help. Please. Thanks.

python html cgi

Solution 1:^[1]

You need to generate a list of "option"s and pass them over to your javascript to make the list

values = {"A": "One", "B": "Two", "C": "Three"}
options = []

for value in sorted(values.keys()):
    options.append("<option value='" + value + "'>" + values[value] + "</option>")

Then inject "options" into your html. Say, in your "template.html" there is a line:

var options = $python_list;

Then at the end of your python script:

####open the html template file, read it into 'content'
html_file = "template.html"
f = open(html_file, 'r')
content = f.read()
f.close()

####replace the place holder with your python-generated list
content = content.replace("$python_list", json.dumps(options))

####write content into the final html
output_html_file = "index.html"
f = open(output_html_file, 'w')
f.write(temp_content)
f.close()

In your "index.html", you should have one line after "var options = ..." that takes the list and generate the dropdown.

$('#my_dropdown').append(options.join("")).selectmenu();

Alternatively, I suggest that you use your python to generate a json file (with json.dumps()), a file called "config.json" maybe. And your html javascript file should read this json file to render the final page. So in your json file, there should be something like:

{ ... "options": ["One", "Two", "Three"] ...}

And in your html <script> section, you could read the option values

d3.json("config.json", function(data)) {
 var options = [];
 for (var i= 0; i < data.options.length; i++)
    {
      options.push("<option value='" + data.options[i] + "'>" + data.options[i] + "</option>");

    }
 $('#my_dropdown').append(options.join("")).selectmenu();
}

Solution 2:^[2]

This is an easier way to do this.

import cgitb
cgitb.enable()

import cgi
form = cgi.FieldStorage()
lister = ['a','b','c']

html_list = ''
for value in lister:
   html_list += '<option value={0}>{0}</option>'.format(value)

html = """Content-type: text/html\n

<html>
<head>
</head>
<body>
<select>
   {}
</select>
</body>
</html>
""".format(html_list)
print(html)

More details here: http://python-forum.io/Thread-string-format-and-string-expressions

Solution 3:^[3]

This is quite possibly the easiest way to do this. Simply update your options using a FOR loop using Python in HTML...eg:

Here is a Select List that I am populating with an array called myOptions that I passed to the form. I also added an If statement that checks to see if one of the values in the list is = to myValue and pre-selected that value. That is totally optional.

 <select>
        {% for opt in myOptions %}
            <option value={{ opt }} 
               {% if myValue==opt %} 
                   selected="true"
               {% endif %}>{{ opt }}
            </option>
        {% endfor %}
 </select>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Mr Lister
Solution 2	Aditya
Solution 3

'HTML select options from a python list

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]