Question: I have a string :

```
datalist = "popupWin:'http://www.adachikan.net/index.php/catalog/product/gallery/id/3049/image/1861/', useZoom: 'cloudZoom', smallImage: 'http://www.adachikan.net/media/catalog/product/cache/1/image/315x400/9df78eab33525d08d6e5fb8d27136e95/1/8/187267-875-40.jpg'"

```

And i want to convert this string into Python Dict. I can use split to break the string and form list:

```
datalist.split(',') = ["popupWin:'http://www.adachikan.net/index.php/catalog/product/gallery/id/3049/image/1861/'",
 " useZoom: 'cloudZoom'",
 " smallImage: 'http://www.adachikan.net/media/catalog/product/cache/1/image/315x400/9df78eab33525d08d6e5fb8d27136e95/1/8/187267-875-40.jpg'"]

```

And so on to get the desired result...

I there any easy way to use this `datalist` as a dict like : `datalist['smallImage']` etc..

Answer: 
inside of a select isn't valid HTML as far as I know, however this isn't hard to solve with jquery (<http://jsfiddle.net/upgradellc/ASR2K/2>): 

html:

```
<select name="timezones" id="timezones">
    <option value="1">Pacific/Auckland +12:00 </option>
    <option value="2">Australia/Brisbane +10:00 </option>
     <option value="3">Aust +10:00 </option>
    <option value="3">A +10:00 </option>
</select>

```

javascript:

```
var spacesToAdd = 5;
var biggestLength = 0;
$("#timezones option").each(function(){
var len = $(this).text().length;
    if(len > biggestLength){
        biggestLength = len;
    }
});
var padLength = biggestLength + spacesToAdd;
$("#timezones option").each(function(){
    var parts = $(this).text().split('+');
    var strLength = parts[0].length;
    for(var x=0; x<(padLength-strLength); x++){
        parts[0] = parts[0]+' '; 
    }
    $(this).text(parts[0].replace(/ /g, '\u00a0')+'+'+parts[1]).text;
});

```

css, to make sure the fonts line up:

```
select{
    font-family:"Courier New", Courier, monospace
}

```
This solution does not expect specific font, it measures your text with your font.

There is a "magic number" to shrink the spaces between both columns the bigger this number the closer the columns are but if it is too big the function won’t work (I use `60` with my font `Verdana 12px`).

Add css with your font

```
.measuring {
    font-size: 12px;
    font-family: Verdana,Arial,sans-serif;
    display:none;
}

```

Add span in your page

```
<span id="measuring" class="measuring"></span>

```

Use the function `twoColumnDropDown()`.

```
function twoColumnDropDown(dd, separatorChars, magicNumber) {
    var biggestLength = 0;
    $(dd).find('option').each(function () {
        $("#measuring").text($(this).text().replace(separatorChars, ''));
        if ($("#measuring").width() > biggestLength) {
            biggestLength = $("#measuring").width();
        }
    });
    biggestLength = biggestLength - magicNumber;
    $(dd).find('option').each(function () {
        if ($(this).text() != "") {
            var parts = $(this).text().split(separatorChars);
            $("#measuring").text(parts[0]);
            $(this).text(parts[0] + String.fromCharCode(8202).repeat(biggestLength - $("#measuring").width()) + parts[1]);

        }
    });
}

```

Explanation:

* `dd` = select element
* `separatorChars` = usually `"-"`
* `magicNumber` = explained earlier