Geek asks and answers

Change dropdown text without changing option text

I have indented indents where I have some root options and their children, as shown below:

Food
    Market
    Restaurants
    Grossery
Clothes
Home
    TV

If I chose Market, for example, the text in the drop-down list is still missing. Then I executed a jQuery function to remove the spaces before the text. It looks like this:

$(function () {
    $("select").change(function () {
        var str = jQuery.trim($("select option:selected").text());

        $("select option:selected").text(str);
    })
});

It works. But, if I try to choose another option after the selected market, for example, the list looks like this:

Food
Market
    Restaurants
    Grossery
Clothes
Home
    TV

The market has lost its indentation. I would like to remove spaces, but only in the selected text shown in the drop-down list, but not in the option.

What should I do?

+3
source share
3 answers

Beat late to the party here ...

, HTML, , , .

<select class="select">
    <option value="1" class="level-0">Item 1</option>
    <option value="2" class="level-1">Item 1.1</option>
    <option value="3" class="level-2">Item 1.1.1</option>
    <option value="4" class="level-1">Item 1.2</option>
</select>

jQuery, , . , , - , , , OPTION - CSS . / .

, , , (, , , ), .

var levelClassPrefix = "level-";
var indentationString = "&nbsp;&nbsp;&nbsp;&nbsp;";

$(".select").each(function() {
    padOptions(this);
});

function padOptions(elem) {
    $("OPTION", elem).each(function() {
        var level = $(this).attr("class").replace(levelClassPrefix, "");
        var currentText = $(this).html();
        var regex = new RegExp(indentationString , "g");
        $(this).html(padText(currentText.replace(regex, ""), level))
    });        
}

function padText(value, level) {
    var output = "";
    for (var i = 1; i <= level; i++) {
        output = output + indentationString;
    }
    return output + value;
}

$(".select").change(function() {
    padOptions(this);

    var selectedOption = $("option:selected", this);
    var currentText = selectedOption .html();
    var regex = new RegExp(indentationString , "g");
    selectedOption.text(currentText.replace(regex, ""));
});

,

+4

?

- :

HTML:

<select>
    <option>Food</option>
    <option class='sub'>Market</option>
    <option class='sub'>Restaurants</option>
    <option class='sub'>Grossery</option>
    <option>Clothes</option>
    <option>Home</option>
    <option class='sub'>TV</option>
</select>

CSS

option.sub { text-indent: 2em; }
+4

? css,

select .level0 {}

select.level1 {
    text-indent: -1.5em; /* you have to calculate your indentation value */
}

select.level2 {
    text-indent: -3em; /* you have to calculate your indentation value */
}

Forge html respectively

<select>
    <option class='level0'>Food</option>
    <option class='level1'>Market</option>
    <option class='level1'>Restaurants</option>
    <option class='level1'>Grossery</option>
    <option class='level0'>Clothes</option>
    <option class='level0'>Home</option>    
    <option class='level1'>TV</option>
</select>

and apply the class accordingly. Maybe I do not know jquery, you should

$(function () {
    $("select").change(function () {
        var theclass = $("select option:selected").class();
        $("select option:selected").set(class, theClass); // <-- is this jquery??
    })
});
+1
source

More articles:


All Articles